Repository navigation
OutlinedInput without label has break in outline due to legend in fieldset #37216
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Open this in Firefox (Current Firefox version v157) https://stackblitz.com/edit/github-mj4fjwcd (Updated)
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
Activity
michaldudak commentedon May 9, 2023
I can confirm - the gap is visible in Firefox (on Windows, in my case). On Chrome the border looks fine.
DarshanDixit05 commentedon May 9, 2023
Hi 👋, I wanted to work on this issue. Can you please assign it to me?
misyel commentedon May 24, 2023
I'd like to pick up this issue if it's still available!
ZeeshanTamboli commentedon May 25, 2023
Please feel free to create a PR.
mj12albert commentedon Apr 13, 2026
Is this still an issue? I don't see it in v9 (MacOS Firefox, Chrome, Safari) https://stackblitz.com/edit/dk2ndjfk?file=src%2FDemo.tsx
This could work as a workaround:
SCjona commentedon Apr 14, 2026
Yes the gap still shows at 500% zoom (Linux Firefox 149.0.2). The
legendelement has a calculated width of0.15px.After adding the workaround it's gone.
Also works fine without workaround on Chrome (calculated width = 0px). So this is probably a Firefox specific issue.
ZeeshanTamboli commentedon Oct 26, 2026
Yes it's a Firefox browser specific issue. Updated the issue description.
github-actions commentedon Oct 26, 2026
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@SCjona Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.