Blue Border of inner Text Field

[felixele217]

Describe the bug
Hey guys, unfortunately we are encountering a blue inner border after clicking the text field on the search bar.

The problem occured after we updated MUI. These are our dependencies:

And this is the code:

Greetings Felix

[devp4]

Have you found a fix for this?

[sharkfabri]

I had the same issue using Tailwind CSS.
Solved adding:

input:focus {
  box-shadow: none !important;
}

[sickdyd]

@sharkfabri Thank you for posting this. I tried to reproduce the issue but was unable to. If this fix works well, just use that. If you want me to investigate this further please provide a codesandbox with the issue. Btw, which browser?

[sharkfabri]

@sharkfabri Thank you for posting this. I tried to reproduce the issue but was unable to. If this fix works well, just use that. If you want me to investigate this further please provide a codesandbox with the issue. Btw, which browser?

Thank you @sickdyd, I just fixed this way, thank you. FYI on all browsers (Chrome, Firefox, Edge...) added a blue border on input focus. I guess it's related to Tailwind because not including it the border disappeares. Anyway that simple CSS fixes the bug.

[felixele217]

my fix for this was this:

in app.css

[type='text']:focus {
    @apply ring-transparent;
}