[input] Fix high contrast cutoff on first character#48150
[input] Fix high contrast cutoff on first character#48150silviuaavram merged 6 commits intomui:masterfrom
Conversation
silviuaavram
requested review from
ZeeshanTamboli,
Copilot,
mj12albert and
siriwatknp
silviuaavram
added
type: bug
Netlify deploy previewhttps://deploy-preview-48150--material-ui.netlify.app/ Bundle size report
|
There was a problem hiding this comment.
Pull request overview
Fixes a High Contrast rendering issue in the Material UI Input underline where the ::before pseudo-element’s non‑breaking space could receive forced colors and visually cut off the first character of the placeholder/value.
Changes:
- Replace
&::beforepseudo-elementcontentfrom a non‑breaking space ("\00a0") to an empty string ("") inInputRootto avoid forced-color artifacts.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
I think FilledInput also has this issue: |
test/regressions/index.test.js
Outdated
| const testcase = await renderFixture('/regression-TextField/StandardTextField'); | ||
| await takeScreenshot({ | ||
| testcase, | ||
| route: '/regression-TextField/StandardTextFieldForcedColors', | ||
| }); | ||
| await page.emulateMedia({ forcedColors: 'none' }); |
There was a problem hiding this comment.
| const testcase = await renderFixture('/regression-TextField/StandardTextField'); | |
| await takeScreenshot({ | |
| testcase, | |
| route: '/regression-TextField/StandardTextFieldForcedColors', | |
| }); | |
| await page.emulateMedia({ forcedColors: 'none' }); | |
| try { | |
| const testcase = await renderFixture('/regression-TextField/StandardTextField'); | |
| await takeScreenshot({ | |
| testcase, | |
| route: '/regression-TextField/StandardTextFieldForcedColors', | |
| }); | |
| } finally { | |
| await page.emulateMedia({ forcedColors: 'none' }); | |
| } |
Claude Code suggestion: try/finally so that if takeScreenshot (or renderFixture) throws, the cleanup will still run, avoids subsequent tests being stuck with forced colors
siriwatknp
left a comment
siriwatknp
left a comment
There was a problem hiding this comment.
Thanks for taking a look on this 👍
|
Confirmation that the visual test on high contrast, without any fix, shows the issue 
|
|
Cherry-pick PRs will be created targeting branches: v7.x |
The non-breaking space character, used to create the
::beforepseudo-element at InputRoot, receives color when High Contrast is used, which in turn obstructs part of the first character of the Input's placeholder/value. Using empty content fixes the issue and keeps the same previous behavior.Add also a visual test with high contrast emulation to check it won't regress.
Fixes #47967