OutlinedInput without label has break in outline due to legend in fieldset

[SCjona]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

https://codesandbox.io/s/sad-fermi-o14mu1?file=/src/App.tsx

Basically create a TextField (variant outlined) or OutlinedInput without label and zoom in (better visible when focused)

Current behavior 😯

Visible break in outlined due to legend

Expected behavior 🤔

No label => No legend => No break in outline

Context 🔦

I upgraded from MUI v4. MUI v4 did not have this issue as the legend had a fixed width of 0.01px set.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 6.1 Arch Linux
  Binaries:
    Node: 19.9.0 - /usr/bin/node
    Yarn: Not Found
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 112.0.2 <-- used

[michaldudak]

I can confirm - the gap is visible in Firefox (on Windows, in my case). On Chrome the border looks fine.

[DarshanDixit05]

Hi 👋, I wanted to work on this issue. Can you please assign it to me?

[misyel]

I'd like to pick up this issue if it's still available!

[ZeeshanTamboli]

Please feel free to create a PR.