Кто знает как пофиксить баг с автозаплнением форм в chrome?

Question

[AlexaZem]

Есть форма с логином и паролем.
Хром автоматически подтягивает в них данные пользователя.

И здесь есть одна особенность.
Если просто загрузить страницу и в консоли вывести значение полей, то логин выводится, а пароль нет.
И только поосле тоого как кликнуть в какой нибудь области (дать фокус странице), из поля пароля можно плучить значение.

Из за этого баг, нельзя залогинится при открытии страницы, только после кликов.

Может кто сталкивыался с таким пведением, как можно пофиксить данную проблему?
p.s.
1.Автозаплнение мне нужно ставить.
2. В поле пароля звездочки есть, но консоль выводит пустую строку (пробовал через setInterval, было пусто пока не кликнул на странице)
3. Пробовал имитировать клики и фокусы (.click(), .focus()) у body, input - не помогло.
4. Ставил обработчики blur и focus инпутам логин и пароль, у логина focus + blur отработал несколько раз, у пароля - 0

Answer 1

[AlexaZem]

Нашел решение сам. Если кому нужно:

Задаем стили для автозаполненых полей (через animation поле можно сделать прозрачным и анимация нам еще понадбиться)
CSS

@-webkit-keyframes autofill {
    to {
        color: #fff;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

JS

var autofill;

passInput.addEventListener('animationstart', (e) => {
	autofill = e.animationName === 'autofill'; // 'autofill' - имя css анимации, которую мы задавали
});

Алгритм действия:
Если есть автоозапоолнение от хрома инпуту добавляется анимация "autofill".
js отлавливает "animationstart" и присваевает true/false переменной autofill

Answer 2

[Айнур Валиев]

это как раз особенность инпута тип password, чтобы умники не вытягивали пароли)