Skip to content

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

Closed
lskaleksandr opened this issue Nov 14, 2017 · 2 comments
Labels

Comments

@lskaleksandr
Copy link

lskaleksandr commented Nov 14, 2017

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

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

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

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

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

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

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

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

Окружение

  • Используемая версия библиотеки:
    10.1.2
  • Имя и версия браузера: chrome только для паролей, FF при любом прездаполении (не только пароль)
  • Имя и версия ОС: Windows 7
@tx44 tx44 self-assigned this Nov 15, 2017
@tx44 tx44 added the bug label Nov 15, 2017
@tx44
Copy link
Contributor

tx44 commented Dec 11, 2017

@tx44
Copy link
Contributor

tx44 commented Dec 29, 2017

@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)

@tx44 tx44 closed this as completed Dec 29, 2017
@tx44 tx44 removed their assignment Dec 29, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants