Input с заголовком. При автозаполнении паролей браузером заголовок закрывает предзаполненные данные

[lskaleksandr]

При использовании Input'a с заголовком для паролей возникает UI баг. При автозаполнении паролей браузером(chrome) заголовок закрывает предзаполненные данные.
В браузере FF данное поведение актуально так же и при предзаполение логина.

Ожидаемое поведение

При автозаполнении паролей браузером заголовок не должен закрывать поле с предзаполненным паролем (2.jpg)

Актуальное поведение

При автозаполнении паролей браузером заголовок закрывает предзаполненные данные (1.jpg)

При клике на любое место на странице, отображение становится нормальным (2.jpg)

Шаги для воспроизведения

1. Ввести пароль в Input с заголовком type= password и залогиниться в приложение.
2. Сохранить пароль в браузере.
3. Выполнить Logout и заново открыть страницу логина.

Возможное решение

Окружение

• Используемая версия библиотеки:
  10.1.2
• Имя и версия браузера: chrome только для паролей, FF при любом прездаполении (не только пароль)
• Имя и версия ОС: Windows 7

[tx44]

@lskaleksandr можно ещё подробностей для воспроизведения?

идеально если на примере расшаришь, типа так:
https://alfa-laboratory.github.io/arui-feather/styleguide/#playground/code=%3Cform%20method='post'%20autoComplete='on'%3E%0A%20%20%3CInput%0A%20%20%20%20label='%D0%9F%D0%B0%D1%80%D0%BE%D0%BB%D1%8C'%0A%20%20%20%20autocomplete=%7B%20true%20%7D%20%0A%20%20%20%20type='password'%0A%20%20%20%20size='xl'%0A%20%20/%3E%0A%3C/form%3E

[tx44]

@lskaleksandr
Проблема на уровне браузеров, даже не React:
https://stackoverflow.com/questions/11708092/detecting-browser-autofill/11710295#11710295

Сделали пару попыток с workarounds, но оптимального и кроссбраузерного решения нет:
#447 (firefox только)
#408 (webkits только)

Есть надежда что React в своих синтетические событиях будет отрабатывать этот кейс:
facebook/react#11097

А пока можно лишь посоветовать использовать workaround с декоратором:
facebook/react#1159 (comment)