0

Autofill doesn't trigger change event in chrome and the username/password form label is getting overlapped with the autofilled value. Attached image sample.

Current behaviour : You have to click inside the form / app to activate the autofill value.

Textoverlap on chrome autofill

I have looked for various solutions and went through multiple threads on github / chromium bugs site but could not find a fix for this issue. This seems to be a bug in chrome which has not been fixed due to some security concerns. Please suggest a way to overcome this issue in Angular.

Nish007
  • 112
  • 6
  • https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password – Asaf Sep 15 '20 at 19:25
  • Can't you just check to see if there is something in the input and then apply a class manually? – r3plica Sep 15 '20 at 21:39
  • @r3plica No we are not getting anything in the value of Input unless we click anywhere in the application. Only after user interaction the value attribute gets set . Will try to apply class using `input:-webkit-autofill~.label` as mentioned in one of the comments of the post shared by @Asaf – Nish007 Sep 16 '20 at 05:09

1 Answers1

1

Found some possible solutions for the overlapping issue in the below github link : https://github.com/Baedda/floating-form-labels/issues/12

I fixed my issue using pure css solution :

Html :-

<div>
    <input type="text" id="name" name="name">
    <label for="name" class="placeholder-label">Name</label>
  </div>

CSS :-

input:-webkit-autofill +  .placeholder-label {
    // your styles for floating label
    -webkit-transform: translate3d(5px,-52%,0);
    transform: translate3d(5px,-52%,0);
}
Nish007
  • 112
  • 6