Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Text Field] The label and helper text flicker and change color when another Text Field is focused #42329

Open
OmkarOza opened this issue May 22, 2024 · 1 comment
Assignees
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

Comments

@OmkarOza
Copy link

OmkarOza commented May 22, 2024

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
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD 
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD  
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.77)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.24
    @mui/core-downloads-tracker:  5.14.18
    @mui/lab: 5.0.0-alpha.153 => 5.0.0-alpha.153
    @mui/material: ^5.14.18 => 5.14.18
    @mui/private-theming:  5.14.18
    @mui/styled-engine:  5.14.18
    @mui/system:  5.14.18
    @mui/types:  7.2.9
    @mui/utils:  5.14.18
    @types/react:  18.2.39
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ~5.3.2 => 5.3.2

Search keywords: Text field, Label, Helper text

@OmkarOza OmkarOza added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 22, 2024
@zannager zannager added the component: text field This is the name of the generic UI component, not the React module! label May 22, 2024
@danilo-leal danilo-leal changed the title The text field label and helper text flicker and change color when another text field is focused. [material-ui][Text Field] The label and helper text flicker and change color when another Text Field is focused May 28, 2024
@danilo-leal danilo-leal added the package: material-ui Specific to @mui/material label May 28, 2024
@ZeeshanTamboli
Copy link
Member

I can reproduce it on Windows OS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
Development

No branches or pull requests

5 participants