[material-ui][Text Field] The label and helper text flicker and change color when another Text Field is focused #42329
Labels
component: text field
This is the name of the generic UI component, not the React module!
package: material-ui
Specific to @mui/material
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
Steps to reproduce
Link to live example with ThemeProvider: https://codesandbox.io/p/sandbox/bitter-grass-tmzqt7?file=%2Fsrc%2FDemo.tsx%3A11%2C31
Link to live example with CssProvider: https://codesandbox.io/p/sandbox/sleepy-booth-34yfhk?file=%2Fsrc%2FDemo.tsx
Current behavior
When working with multiple text fields, the label and helper text flicker while focusing on any text field, and some text fields' label and helper text remain darker than others. This issue is primarily visible in dark mode (this also happens in the light mode as well), which is why I provided an example in dark mode. I have reproduced this issue using both ThemeProvider and CssVarsProvider, and it occurs in both cases. Additionally, this problem occurs only on Windows OS and appears in all major web browsers, such as Chrome, Edge, and Opera, except for Firefox.
ValidationTextFields.demo.Material.UI.-.Google.Chrome.2024-05-22.12-51-17.mp4
Expected behavior
The label and helper text should remain steady, without flickering or changing color.
Context
No response
Your environment
npx @mui/envinfo
Search keywords: Text field, Label, Helper text
The text was updated successfully, but these errors were encountered: