MUI TextField inside Custom Tooltip loses focus when state changes

I’m using MUI, and I’ve got a custom Tooltip around one TextField in a form. As soon as I type anything in that particular TextField, it loses focus. It updates the state of that value of my formData object to the one character I was able to type, so that value is only ever one character long. The other TextFields in my form work as expected. If I replace the custom Tooltip with a standard one, that particular TextField works fine, too. I’ve replicated the issue on codesandbox. Here’s the code I used there:

import { useState } from "react";
import { TextField, Box } from "@mui/material";
import { styled } from "@mui/material/styles";
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";

export default function App() {
  const [formData, setFormData] = useState({
    title: "",
    name: ""
  });

  const handleFormChange = (e) => {
    const { name, value } = e.target;
    setFormData((formData) => {
      return {
        ...formData,
        [name]: value
      };
    });
  };

  const CustomWidthTooltip = styled(({ className, ...props }) => (
    <Tooltip {...props} classes={{ popper: className }} />
  ))({
    [`& .${tooltipClasses.tooltip}`]: {
      maxWidth: 400
    }
  });

  return (
    <Box component="form" display="flex">
      // THIS ONE WORKS JUST FINE 
      <TextField
        onChange={handleFormChange}
        autoComplete="title"
        name="title"
        id="title"
        label="Title"
        required
      />
      // THIS ONE IS BROKEN
      <CustomWidthTooltip title="Foo">
        <TextField
          onChange={handleFormChange}
          autoComplete="name"
          name="name"
          id="name"
          label="Name"
          required
        />
      </CustomWidthTooltip>
    </Box>
  );
}

Thanks for your help, folks! I appreciate you all.

Answer

You’re initializing CustomWidthTooltip inside the App component, which is causing the tooltip to reintialize on local state change. Whenever the name is updated inside formData local state, the TextField inside the CustomWidthTooltip component is being recreated in the UI, causing the focus loss as a result.

You should move the CustomWidthTooltip out of the component App.

Updated Code

import "./styles.css";
import { useState } from "react";
import { TextField, Box } from "@mui/material";
import { styled } from "@mui/material/styles";
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";

const CustomWidthTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    maxWidth: 400
  }
});

export default function App() {
  const [formData, setFormData] = useState({
    title: "",
    name: ""
  });
  console.log("formData", formData);

  const handleFormChange = (e) => {
    const { name, value } = e.target;
    console.log({ name, value });
    setFormData((formData) => {
      return {
        ...formData,
        [name]: value
      };
    });
  };

  return (
    <div>
      <h3>With a custom tooltip, it's broken:</h3>
      <Box component="form" display="flex">
        <TextField
          onChange={handleFormChange}
          autoComplete="title"
          name="title"
          id="title"
          label="Title"
          required
        />
        <CustomWidthTooltip title="Custom Custom Custom Custom Custom Custom">
          <TextField
            onChange={handleFormChange}
            autoComplete="name"
            name="name"
            id="name"
            label="Name"
            required
          />
        </CustomWidthTooltip>
      </Box>
      <h3>With a standard tooltip, it works:</h3>
      <Box component="form" display="flex">
        <TextField
          onChange={handleFormChange}
          autoComplete="title"
          name="title"
          id="title"
          label="Title"
          required
        />
        <Tooltip title="Standard">
          <TextField
            onChange={handleFormChange}
            autoComplete="name"
            name="name"
            id="name"
            label="Name"
            required
          />
        </Tooltip>
      </Box>
    </div>
  );
}

Edit gallant-dijkstra-9fynn