Search code examples
cssreactjsmaterial-uistylingform-fields

MUI React remove outline border on focus

I have been trying to place 2 MUI inputs under the same label to create a custom field. I found the solution by wrapping the fields in another TextField as a div, but this has some undesired effects on the borders.

I have the fields looking like this right now, which is perfect.

Unfocused

When I highlight the TextField, the border is correct:

TextField focused

But when I highlight the select field, I get the following:

Select focused

As you can see, when the Select is focused, the border around both the TextField is visible when it shouldn't be.

Can anyone please help with how to hide the border around the TextField when the Select field is focused?

CodeSandbox Link

Solution

  • Try this for the TextField:

    <TextField
  ...
  sx={{
    width: "30%",
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        border: "none",
      },
      "&.Mui-focused fieldset": {
        border: "none",
      },
      "&:hover fieldset": {
        border: "none",
      },
    },
  }}
/>

    This sets the border to none by default, and also when the input is focused or hovered. You can see it in this CodeSandbox.