How to pragmatically hide browser's autofill popup on scroll?

Question

The browser's autofill popup stays in same place even after the page is scrolled down. Please refer the image. The marked autofill popup is for first name, and it neither hides on scroll nor it stay below first name.

Also, I have noticed slight difference in the autofill popup. In many site I dont see the "Autofill settings" option in the Autofill popup.

I have tried google'ling, but didnt find the satisfactory answer.

So the questions are

How to hide the browser's autofill on scroll?
How to get rid of the "Autofill settings" option in the popup. (Please refer the image.)

Thank you.

PS: I do not want to disable the auto-fill popup. And This issue is not related with autocomplete="off"

Possible duplicate of [Disabling Chrome Autofill](https://stackoverflow.com/questions/15738259/disabling-chrome-autofill) — Get Off My Lawn, Apr 14 '18 at 14:41
@GetOffMyLawn Its okay if I cant disable it. But the Autofill should hide on scroll. And this issue is not about disabling it, as in the link you have mentioned. — Basavaraj Bhusani, Apr 14 '18 at 14:44
I see, you want to close it when you scroll? If so, you can remove focus from that field, and that might solve the issue, so like `myInput.blur()` or maybe `window.focus()` — Get Off My Lawn, Apr 14 '18 at 14:47
@GetOffMyLawn, That would work for the form with small number of fields. It wouldnt be ideal if the form is too big. We cant trigger blur event on each input field. — Basavaraj Bhusani, Apr 14 '18 at 14:50

score 0 · Answer 1 · answered Apr 14 '18 at 15:05

You could try and remove focus from the element. If you want to give focus back to the element after the user stops scrolling, you you would use a timeout within the scroll callback, and give the element focus again.

let active, timer
window.addEventListener('scroll', () => {
  Array.from(document.querySelectorAll('#main-form input')).forEach(input => {
    if (document.activeElement == input) active = input
    input.blur()
  })
  clearTimeout(timer)
  timer = setTimeout(() => active && active.focus(), 200)
})

<form id="main-form">
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
</form>

Note: If you don't want to give focus back to the element after scroll, remove the if statement and the two Timeouts.

How to pragmatically hide browser's autofill popup on scroll?

1 Answers1