UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Steps to reproduce the problem:
I have a text box and two buttons on an HTML page:

<form>

<input type="text" id="inp" />

<input type="button" value="clear text" onclick="inp.value = ''; inp.focus();" />

<input type="submit" value="submit" />

</form>

When an end-user selects one of autocomplete items, the text box background color becomes yellow (it's ok). As you can see, there is the 'clear text' button. If an end-user clicks it, the text box text is removed. However, the editor is still in autocomplete mode (its background is still yellow). I have attached a full HTML page for testing and a video that demonstrates this behavior.

I need neither to totally disable the autocomplete mode nor to change the text box back color. I need to exit the autocomplete mode when the button has been clicked. In other words, the ‘inp’ HTML input should not have the ‘-webkit-autofill’ pseudo class.

Thanks.

What is the expected behavior?
An autocomplete mode ends and the editor has a default appearance when a text is modified using JavaScript.

What went wrong?
The editor is still in autocomplete mode after a text is modified using JavaScript.

Did this work before? N/A 

Chrome version: 57.0.2987.133  Channel: stable
OS Version: 6.3
Flash Version: Shockwave Flash 25.0 r0

I also asked the same on google groups (https://groups.google.com/a/chromium.org/forum/#!topic/chromium-html5/_m_qHZ-29jI) and was recommended to submit an issue here. 
Would you please clarify how to end this mode using JavaScript (as soon as the ‘clear text’ button is clicked)?
 

Deleted: test.html 266 bytes

test.html 266 bytes View Download

Deleted: video.swf 367 KB

video.swf 367 KB Download