CODEWITHSUNDEEP
angularinternet-explorer-11microsoft-edgehtml-datalist
Guillaume Gaujac
Guillaume Gaujac

Reputation: 1651

Datalist not displaying properly in Edge and IE11

In my .html I've a to assign some value and a datalist with 2 option :

<input autoComplete="off" 
type="text" 
(change)="methodWhenIChangeMyValue()">
      <datalist id="{{row.MYOBJECT}}">
            <option value="{{value}}">{{value}}</option>
            <option *ngFor="let i of arrayToParse[row.MYOBJECT]" value="{{i.MYOBJECTID}}">
                    {{i.MYOBJECTID}}</option>
       </datalist>
</input>

In Firefox and Chrome my list displays normally, but in Edge/IE11 only one element is displayed. All data are loaded, but I need to navigate inside my option to show them. Finally, when I've all my element (after a navigation) if I search an element more specific a grey block is displayed. How can I fix this ?

All my actions for < input > are not refered inside this snippet.

Only one element is displayed at the beginning:

One element, but all loaded

A grey block is displayed when I search a more specific value:

Grey block when I search more specifically

Upvotes: 0

Views: 4340

Answers (2)

Raul Butuc
Raul Butuc

Reputation: 314

Datalist is not supported by all browsers and it is not handled the same way. I recommend you switch to something such as flexselect: https://rmm5t.github.io/jquery-flexselect/

You can find many other alternatives out there, but this is the one I use since it doesn't have any compatibility issues.

Upvotes: 0

programmerguy123
programmerguy123

Reputation: 11

It looks like a bug within MS Edge (Microsoft Edge 44.17763.1.0, Microsoft EdgeHTML 18.17763), I was able to reproduce it using the following steps:

  1. Launch the following demo: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
  2. Type out the word 'Chocolate' letter by letter in the 'Choose your flavour' input, then erase all the characters, one by one, until none left. What appears is a broken datalist underneath the input, like the screenshots above.

Upvotes: 1

Related Questions