Angular Input with datalist options, how to differentiate user input and select option from list in edge browser

Question

The below code is to display input with options. Whenever user types, that text should be searched and display results. For this 'onInputChanges()' implemented on input event . This works perfectly in Chrome browser but in Edge browser, it is not working.

Referred lot of StackOverflow questions but none of them are specific to edge browser.

<div>
    <input type="text" list="browsers" (keyup.enter)="addValue(fieldInput.value); fieldInput.value=''"
    #fieldInput (input)="onInputChanges(fieldInput.value, $event)">

    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
</div>

input event is getting fired in Chrome when the user types something or option is selected from the data list. In chrome browser below code (Object.prototype.toString.call(event)) identifies whether the user entered the value or selected value from the list. Chrome browser, if a user types then Object.prototype.toString.call(event) returns as "InputEvent" else return as "Event".

onInputChanges(fieldInput.value, $event) {
let isInputEvent = Object.prototype.toString.call(event).indexOf("InputEvent")> -1);
if(isInputEvent) {
  //user typed the value in input box
}else {
  //selected from list
 }
}

But in the Edge browser, Object.prototype.toString.call(event) always returns as " Event ", because of this, not able to differentiate between the user typed or user selected value from the list in Edge.

Are there any other alternative ways to identify the event information? note: event.type always returns 'input' so can't use this.

1. When user types in the input
2. If an option is selected from the options list.

Basic example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

Answer 1

What the Edge browser version? I have tried your code using the following code in my Edge browser (Microsoft Edge 42.17134.1.0 version), it seems that everything works well:

<div>
  <input type="text" list="browsers" (keyup.enter)="addValue(fieldInput.value); fieldInput.value=''"
  #fieldInput (input)="onInputChanges(fieldInput.value, $event)">

  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</div>

<span>
  {{selectedvalue}}
</span>

Code in component.ts file:

  onInputChanges(value, event){
    this.selectedvalue=value;
  }

The screenshot as below: