Number input with datalist does not trigger change event

Question

I am using an input field of type number with a list of suggestions defined as a datalist.

Internet Explorer 11 and Microsoft Edge do not trigger the change event, once a suggestion is picked from the list. Neither the ng-model will update, nor will ng-change be triggered. It works fine in other browsers, though.

<input type="number" list="suggestions" ng-model="selectedValue" />

<datalist id="suggestions">
  <option value="0.5"></option>
  <option value="1"></option>
  <option value="1.5"></option>
  <option value="2"></option>
</datalist>

{{ selectedValue | json }}

Microsoft's browsers behave differently: One of them will update the model, when user clicks outside of the input field and it looses focus. The other browser will not trigger a change event at all. Entering values manually (by keyboard, not selecting a suggestion) will always update the model.

Is there anything I can do about that? Either a workaround, or, maybe am I using it wrong?

score 0 · Answer 1 · answered Feb 08 '21 at 06:31

Try to test the oninputevent for the input field. See whether it helps to fix the issue.

example:

<input list="testList" name="origin node" ng-model="SelectedDoctor" oninput = "angular.element(document.getElementById('check')).scope().LoadSessionData(this)" autocompletestListte="off" required /> 
<datalist id="testList" >

Reference:

Input with Datalist - ng-change is not fired in IE for AngularJS

Number input with datalist does not trigger change event

1 Answers1