[TextField] Fix Safari outlined notch expansion in flex layouts#48566
[TextField] Fix Safari outlined notch expansion in flex layouts#48566maxmorlocke wants to merge 3 commits into
Conversation
Deploy previewhttps://deploy-preview-48566--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
| style: { | ||
| maxWidth: '100%', | ||
| // Safari: avoid percentage max-width on <legend> inside <fieldset> in flex layouts. | ||
| maxWidth: 'none', |
There was a problem hiding this comment.
Although the now unlimited-width <legend> is visually clipped by it's enclosing <fieldset>, the scroll dimensions of the component is changed and could cause unexpected scrollbars when the layout is narrow:
<Box sx={{ width: 220, overflowX: 'auto' }}>
<TextField
label="This label is intentionally too long for the outlined input widt…"
defaultValue="Hello world"
variant="outlined"
sx={{ width: 195 }}
/>
</Box>
There was a problem hiding this comment.
Great catch and thanks for the feedback. Since this has gone through a few iterations over the last couple of years, I'm going to try to make an adjustment to how we calculate the notch's width using a ResizeObserver similar to select/autocomplete's width calculations. This is less ideal, but follows an established pattern. I hope to have an update within the next day or three.
2 participants
This fixes a Safari/WebKit rendering bug where the outlined TextField notch fails to expand correctly in flex layouts (commonly reproduced with Stack), causing the floating label to overlap the top border.
The root cause is WebKit’s handling of percentage max-width on legend inside fieldset in this layout scenario. To my knowledge, this:
I updated OutlinedInput notch expansion style to avoid percentage max-width in the notched state ('100%' maxWidth: '100%' → 'none'). Using this approach keeps behavior consistent across browsers while specifically addressing Safari/WebKit and does not rely on any hardcoded values for width and should not change behavior.
I added a test that reproduces this flex layout scenario and asserts the notch expands on focus. I also added an e2e test on this scenario. These tests (and any tests that failed due to this change) now test on behavior, not on a strictly computed style. I find this makes for more robust tests, but I am happy to change if this is problematic.