Who knows how to fix a bug with autocomplete forms in chrome?

Question

JavaScript

There is a form with login and password.
Chrome automatically pulls user data into them.
And there is one peculiarity here.
If you just load the page and display the value of the fields in the console, then the login is displayed, but the password is not.
And only after you click in some area (give focus to the page), you can get the value from the password field.
Because of this bug, you cannot log in when you open the page, only after clicks.
Has anyone come across this behavior and how can I fix this issue?
ps
1. I need to set autofill.
2. There are asterisks in the password field, but the console displays an empty string (I tried using setInterval, it was empty until I clicked on the page)
3. Tried to simulate clicks and focuses (.click(), .focus()) on body, input - didn't help.
4. I set blur and focus handlers to login and password inputs, the focus + blur login worked several times, the password - 0

Answer 1

Found the solution myself. If anyone needs:
Set styles for auto-filled fields (through animation, the field can be made transparent and we still need 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 анимации, которую мы задавали
});

Action algorithm:
If there is autofill from chrome, the "autofill" animation is added to the input.
js catches "animationstart" and sets true/false to autofill variable

Answer 2

this is just a feature of the input type password, so that smart people do not pull out passwords)