Text Input fields not working with chrome field history

Question

On a regular text input field, I would expect to see a history of what I've entered in to that field in chrome by double clicking on it.

We have some fields which are rendered on a page with Angular JS. However, they never have any history items, and double clicking never shows any results.

In a brief test, appears that adding a name attribute doesn't restore this functionality.

Is this because the field is never formally submitted through a form element? If so, how can this be worked around?

All the results I've been able to find on google for this issue relate to the inverse case, with "off" being ignored.

Edit: here's an example. I am able to add the value to the history if I send a POST request, but not to the field which is not in a form and submitted: https://jsfiddle.net/gtuzy4p2/2/

Here also is a link to the spec, which details how to use the attribute, but not how values should be saved by the browser. https://html.spec.whatwg.org/multipage/forms.html#autofill

Answer 1

As you've noticed, the spec does not specify how and when browsers should automatically remember form values. That means that browsers can do it any way they want, and you cannot rely on a particular behavior. In this case, Chrome and many other browsers take submitting the form as the only clue to save the input values.

If you want to ensure a certain behavior, look into the datalist element . Here is an example, directly copied from the linked wiki page:

 <label>Choose a browser from this list: <input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist> 

Using JavaScript, you can write your own logic to store previously entered values into local storage and then dynamically populate a datalist with those values at a later page load. Most (if not all) browsers that support datalist will also do autocompletion for its elements, and if not, users can simply choose one from the dropdown.