search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.38k stars 32.14k forks source link

[text field][Joy] Autofilled state is indistinguishable #34071

Closed oliviertassinari closed 1 year ago

oliviertassinari commented 2 years ago

Duplicates

Latest version

Current behavior 😯

The autofill UI state is indistinguishable:

Screenshot 2022-08-25 at 15 49 55

This prevents me as an end-user to know if, for example, the password that is provided was auto-filled, hence likely correct, or if I changed one character by mistake that would make the sign-in fail.

Expected behavior 🤔

The autofill UI state is distinguishable:

Screenshot 2022-08-25 at 15 49 45

Steps to reproduce 🕹

Steps:

  1. https://codesandbox.io/s/joy-cra-typescript-forked-bhrc5u?file=/src/

Context 🔦

There was a past attempt at this problem in #17863. Now, I'm not so sure it's still the best solution to the problem. We might want to update Material UI to rely on the color-scheme CSS property. I'm not sure. This problem also surfaced in https://github.com/mui/mui-toolpad/pull/809#issuecomment-1220307463.

Your environment 🌎

See the codesandbox

siriwatknp commented 1 year ago

With the current implementation, the way to fix this with CSS is to use :has() but it will be years until we can use it.

What we can do now is change the text color when autofill is detected.

oliviertassinari commented 1 year ago

@siriwatknp What prevents us to fix this like in Material UI?

siriwatknp commented 1 year ago

@siriwatknp What prevents us to fix this like in Material UI?

When you say "like in Material UI", which part do you mean? is it the animation (mui-auto-fill)?

siriwatknp commented 1 year ago

I try a different approach using CSS variables, what do you think? https://github.com/mui/material-ui/pull/35056