[InputField] Autocomplete/Autofill value [ By Browser password manger] overlap by InputLabel.

[k-e-r]

This issue is the same as "mui/material-ui/issues/24756".
I'm making this function from scratch without mui. I'll refer to this one and solve it.

[k-e-r]

The above ticket is a duplicate of this one. Mentioned just in case.
"mui/material-ui/issues/22488"

Also, the comments here were very helpful.
"mui/material-ui/issues/22488#issuecomment-687293183"

I considered putting a value in the input value from the beginning, but I wanted to avoid this from a UX perspective, so I implemented the following countermeasure.

// for Chrome

useEffect(() => {
  const interval = setInterval(() => {
    try {
      const detect = document.querySelectorAll(
        ':-internal-autofill-selected'
      );
      if (detect.length === 2) {
        // change label size(add css class)
        setEmailLabelCss('rInputLabelActive');
        setPassLabelCss('rInputLabelActive');
      } else if (detect[0].type === 'email') {
        setEmailLabelCss('rInputLabelActive');
      } else {
        setPassLabelCss('rInputLabelActive');
      }
    } catch (error) {
      console.log('error:', error);
    }

    clearInterval(interval);
  }, 500);
  return () => clearInterval(interval);
}, []);

The "else if" and after are unlikely to be considered, but are included just in case.

// for other browser - CSS

input:-webkit-autofill ~ .rInputLabel {
  transform: translate(14px, 7px) scale(0.75);
}
input:autofill ~ .rInputLabel {
  transform: translate(14px, 7px) scale(0.75);
}

• HTML

<div>
  <input />
  <label>
    // e.g. email
  </label>
</div>

Chrome: Version 102.0.5005.61 (Official Build) (arm64)
Safari: Version 15.0 (16612.1.29.41.4, 16612)
Firefox: 101.0.1 (64 ビット)