Loading...

Erratic and Random

Random Thoughts Of Interest Only To Me

Smilonich.com

Suppressing Chrome Auto Suggest

How do you prevent auto suggest on a date field?

This morning I wasted an hour of my life searching for a way to prevent Chrome auto suggest from obscuring a form field expecting a date as a data type from a date picker. There doesn't seem to be an agreed upon solution. 

The form contains a set of accordion  panels from Bootstrap (version 3.3.4) and the date picker is from jQuery UI (version 1.12.1).  The date field is actually hidden when the form loads, which complicated the discovery slightly, since the panel is set to display none.

When a user clicks on the date field, Chrome conveniently shows us a list of addresses. I tested several different solutions from several articles with ideas ranging from adding an attribute after the page loaded to adding; autocomplete="off", autocomplete="false", and autocorrect="off". None of these worked.

It's helpful to point out this is a problem with auto-suggest, NOT auto-fill. There are many comments and solutions that intertwine these two concepts. The following is the only option that corrected the auto-suggest behavior. The key attributes are "role" and "autocomplete". 



	input name="StartDate" id="StartDate" role="presentation" autocomplete="nope" type="text" class="datepicker"

Role

Role is used by screen readers and ARIA to provide better definition of some tags. This is a standard not fully implemented but will be in the future. If a Role is not included in the code, browser may apply the first recognized role, which can give unwanted results, like the date field. 

Autocomplete

"The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values." (Source)