[MDCTextField] Outlined - w/ Leading Icon - Label gap incorrect when focused and has a prefilled value

material-components / material-components-web

Modular and customizable Material Design UI components for the web

https://material.io/develop/web

MIT License

17.12k stars 2.15k forks source link

[MDCTextField] Outlined - w/ Leading Icon - Label gap incorrect when focused and has a prefilled value #5110

Open williamernest opened 4 years ago

williamernest commented 4 years ago

Go to https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/18_06_17_850/spec/mdc-textfield/classes/baseline-leading-icon.html?utm_source=golden_json (latest golden screenshot)
Focus the bottom textfield that has a pre-filled value.
Notice the size of the gap for the label.

abhiomkar commented 4 years ago

Findings from my initial investigation:

Able to reproduce this in MDC Web v3.2.0 and also in v2.0.0
This is happening only on latest chrome version (Version 77.0.3865.75 (Official Build) (64-bit), also on v76), works as expected on FF, Safari.
Not able to repro this issue on Chrome v75

abhiomkar commented 4 years ago

Sent potential fix (PR #5111). But I curious history of the following commit that reverts offsetWidth to scrollWidth, was there any reason for choosing scrollWidth over offsetWidth or clientWidth?

--> https://github.com/material-components/material-components-web/pull/4171/commits/c3fc1d007810eb8688d300cd73521fcc16b118e3