diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index e80b834e33fedf..581e36ebb17817 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -124,7 +124,7 @@ const FilledInputRoot = styled(InputBaseRoot, { }`, left: 0, bottom: 0, - content: '"\\00a0"', + content: '""', position: 'absolute', right: 0, transition: theme.transitions.create('border-bottom-color', { diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index 3839679f3c1321..9ba938d5b98a09 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -97,7 +97,7 @@ const InputRoot = styled(InputBaseRoot, { borderBottom: `1px solid ${bottomLineColor}`, left: 0, bottom: 0, - content: '"\\00a0"', + content: '""', position: 'absolute', right: 0, transition: theme.transitions.create('border-bottom-color', { diff --git a/test/regressions/fixtures/TextField/StandardTextField.js b/test/regressions/fixtures/TextField/StandardTextField.js new file mode 100644 index 00000000000000..cc6758bfff7a72 --- /dev/null +++ b/test/regressions/fixtures/TextField/StandardTextField.js @@ -0,0 +1,21 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; + +export default function StandardTextField() { + return ( +
+
+ + + + +
+
+ + + + +
+
+ ); +} diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index 0e408972d2a638..ee0c85c1ddc415 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.js @@ -160,6 +160,21 @@ async function main() { }); }); + describe('TextField', () => { + it('should render standard variant correctly in forced-colors mode', async () => { + await page.emulateMedia({ forcedColors: 'active' }); + try { + const testcase = await renderFixture('/regression-TextField/StandardTextField'); + await takeScreenshot({ + testcase, + route: '/regression-TextField/StandardTextFieldForcedColors', + }); + } finally { + await page.emulateMedia({ forcedColors: 'none' }); + } + }); + }); + describe('Textarea', () => { it('should keep input caret position at the end when adding a newline', async () => { await renderFixture('/regression-Textarea/TextareaAutosize');