How to get value of input when autocompleted by Chrome

Question

I have a simple input for which Google Chrome autocompletion feature kicks in.

When I accept the suggestion with → and then immediately click a button (without hitting Enter or Tab), then accessing value of the DOM element returns only the characters I entered by hand, not the whole content of the field. The same occurs with jQuery, i.e. calling $(input).val().

Here is a minimal example that demonstrates this behavior. I've used type="email" input here instead of type="text" to ensure that the browser enables autocompletion, but it behaves exactly the same.

The same happens when you click the field after the suggestion is added to your input (higlighted), instead of using →.

Similar problem occurs on Safari 7, althought there is no problem with retrieving the value, only no event is emitted in the second scenario I described (clicking the field after suggestion is added).

Do anybody has some idea how to circumvent this, apart of disabling autocompletion (which I did)?

---

UPDATE: I've opened bug with Chromium. No response till now.

Answer 1

It turned out to be a bug in Chrome, which was corrected as of version 43.0.2357.65 (it is still present in 43.0.2357.45 though).

---

Update as of June 2017: this problem was fixed in Chrome 43 and is no longer present for two years now.

Answer 2

Try putting the input field in a form. This way the input field doesn't autofill. And forces you to click one of the suggestions.

<form>
    <input id="email" type="email"/>
</form>
<button>OK</button>
<span></span>