title: Angular Input with datalist options, how to differentiate user input and select option from list in edge browser
body: <p>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 <strong>input event</strong>. This works perfectly in Chrome browser but in Edge browser, it is not working.</p>
  
  <p>Referred lot of StackOverflow questions but none of them are specific to edge browser.</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="text" list="browsers" (keyup.enter)="addValue(fieldInput.value); fieldInput.value=''"
      #fieldInput (input)="onInputChanges(fieldInput.value, $event)"&gt;
  
      &lt;datalist id="browsers"&gt;
        &lt;option value="Internet Explorer"&gt;
        &lt;option value="Firefox"&gt;
        &lt;option value="Chrome"&gt;
        &lt;option value="Opera"&gt;
        &lt;option value="Safari"&gt;
      &lt;/datalist&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>input event</strong> is getting fired in Chrome when the user types something or option is selected from the data list.
  In chrome browser below code <strong>(Object.prototype.toString.call(event))</strong> 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".</p>
  
  <pre><code>onInputChanges(fieldInput.value, $event) {
  let isInputEvent = Object.prototype.toString.call(event).indexOf("InputEvent")&gt; -1);
  if(isInputEvent) {
    //user typed the value in input box
  }else {
    //selected from list
   }
  }
  </code></pre>
  
  <p>But in the Edge browser, <strong>Object.prototype.toString.call(event)</strong> always returns as "<strong>Event</strong>", because of this, not able to differentiate between the user typed or user selected value from the list in Edge.</p>
  
  <p>Are there any other alternative ways to identify the event information?
  <strong>note:</strong> event.type always returns 'input' so can't use this.</p>
  
  <ol>
  <li>When user types in the input</li>
  <li>If an option is selected from the options list.</li>
  </ol>
  
  <p>Basic example: <a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist" rel="nofollow noreferrer">https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist</a></p>