Wrong input autocompletion position on scroll (chrome)

Question

I'm having some troubles with the default autocompletion of an input text. It does not move acordingly when scrolling. I would like that the autocomplete text stays right below the input. Is there a way to accomplish this?. This happens to me in Chrome browser Versión 57.0.2987.133

fiddle

<form action="/action_page.php" autocomplete="on">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">  
    <div style="height:150px">
    </div>
</form>

Answer 1

The browser does not give you access to the autocomplete tooltip so you can scroll it with the enclosing container. The default behaviour is removing the tooltip when you scroll the window, but it works differently with inner document containers, like the form in your case. I would suggest to force the general behaviour, removing the tooltip, by just removing and restoring the focus from the active input field in a form's onscroll event attribute.

form {
  height: 200px;
  overflow: auto;
}

<form action="/action_page.php" autocomplete="on"
        onscroll="var a = document.activeElement; a.blur(); a.focus();">
    <div style="height:50px"></div>
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">
    <div style="height:150px"></div>
</form>

Answer 2

Those autocomplete tooltips are an native implementation from Google Chrome and can, like on other browsers, not changed with css/js. This fact gives you two possibilities to solve your problem:

Clean up your markup. Semantic and clean html markup for forms is essential for error-resistance. Else it is a good solution to give users the chance to use the browser default autocompletion if they are used to it. Besides this autocomplete scripts are not meant to work for fornames or lastnames, more like for search / choosing an item from a list. A clean and mostly safe form markup could look like this jsfiddle:

Implement an autocomplete javascript plugin. There are a lot of script you can implement to give users a better experience by adding nessecary informations in documents. But as I sad its not common to use those for names.

form {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 250px;
}

.form-row {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 4px;
}

input[type="text"],
input[type="email"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

<form action="/action_page.php" autocomplete="on">

  <div class="form-row">
    <!-- labels on top of inputs can improve usability alot -->
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
  </div>
  
  <div class="form-row">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
  
  <div class="form-row">
    <label for="email">E-mail adress:</label>
    <input type="email" name="email" id="email">
  </div>
  
  <input type="submit">
</form>

Answer 3

In html, div is a blocking element. So the div that you have implemented seems to be blocking the positioning of the UI components.

In this case, chrome is interpreting it like it would need to display autocomplete after other ui elements inside the form have been rendered. You can try changing that div to a span and see if that changes the rendering.

This appears as chrome's own interpreted behavior in your case. You won't be able to change chrome's rendering behaviour, but you can turn off autocomplete in your form and instead enable your own autocomplete list through https://jqueryui.com/autocomplete/

Also, read this, the version of chrome you are using or referring to had some breaking changes. Current version is 60.0.3112.90. With web browsers, as you will already know, newest version is better.

https://github.com/jmoenig/Snap--Build-Your-Own-Blocks/issues/1707