Как отследить появление autofill-подсказок к полям формы?

Question

[romaro]

Можно ли отследить (прежде всего в хроме) появление автоподстановочных значений к полям формы?

Значение value инпута при появлении такой подсказки остается пустым, но сама подсказка здорово уродует инпут:


Хром дает такому инпуту класс:
input:-internal-autofill-selected

Я думал, что можно вызвать на элементе:
window.getComputedStyle(inputRef.current)

Скажем, через секунду после загрузки. Но в вычисленные стили internal-autofill-selected почему-то не попадает.

Может быть есть более удачный сценарий для определения появившихся подсказок?

Comments

[Антон Горецкий]

зачем эти мучения? Добавьте в инпут атрибут autoComplete="off" и живите спокойно.

[romaro]

Антон Горецкий, хром игнорирует этот атрибут, много раз обсуждалось

[Модератор]

Фрагменты кода в вопросе надо обернуть тэгом code для корректного отображения. Если в вопросе нет кода, не надо ставить тэги, относящиеся к данному тэгу (см.п.3.1, 3.8 Регламента).

Answer 1

[romaro]

В общем, я пока вышел из положения способом, который порекомендовал один из ответивших в этом топике:

const onFocus = (ev: FocusEvent) => {
  (ev.currentTarget as HTMLInputElement)?.removeAttribute('readonly');
};

<input
  ...
  onFocus={onFocus}
  readOnly
 />

То есть все мои инпуты по умолчанию readonly. Это позволяет отсекать автоподсказки при загрузке страницы, но не лишаться их при помещении курсора в поле ввода.

Answer 2

[Rsa97]

https://developer.mozilla.org/en-US/docs/Web/CSS/:...

Comments

[romaro]

Читал, включая ссылки на баг-репорты. То есть я никак не могу отследить появление подсказок в хроме?