Ngx-chips: Internet Explorer 11 breaks auto complete drop down

Created on 9 Jul 2018  路  6Comments  路  Source: Gbuomprisco/ngx-chips

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

When using the autocomplete in IE11 the drop-down flashes empty and does not show any items in list to be selected. Worked as expected in chrome. The user can select items by use the down arrow however they cannot see what item is selected. I saw a similar issue that was fixed by a version change in ng2-drop-down to v0.10.0 but I think this issue is caused by polyfills needed for IE to work

The drop down works on the demo site in IE11 but i think that demo site isn't using these pollyfills?

Expected behavior

The items in the auto complete should be visible to be selected.

Minimal reproduction of the problem with instructions (if applicable)

  1. Make new folder
  2. npm install -g @angular/cli
  3. ng new angular-tour-of-heroes
  4. cd into angular-tour-of-heroes
  5. npm install ngx-chips
  6. update app.module.ts to based on https://github.com/Gbuomprisco/ngx-chips#configuration
  7. enable IE 11 polyfills in polyfill.ts (other wise IE will be blank) may need to npm install classlist.js and web-animations-js
    7a. Link to polyfill
  8. add code from https://github.com/Gbuomprisco/ngx-chips#autocomplete to app.compment.html
  9. ng serve and open in IE11

What do you use to build your app?. Please specify the version

angular-cli 6.0.8

Angular version:

6.0.7

ngx-chips version:

1.9.2

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

IE 11

Most helpful comment

We have the same problem with the IE 11 and Edge Browser. The error appears since we are using the latest version of the ngx-chips lib (1.9.2) and angular 6.0.7. Is there are workaround to fix this bug because it is very crititcal for our project. Using the webanimation polyfill makes no difference. We also cannot downgrade the version because of the angular version.

All 6 comments

I believe this is a problem with the dropdown component. I've created a pull request there:
https://github.com/Gbuomprisco/ng2-material-dropdown/pull/48

We have the same problem with the IE 11 and Edge Browser. The error appears since we are using the latest version of the ngx-chips lib (1.9.2) and angular 6.0.7. Is there are workaround to fix this bug because it is very crititcal for our project. Using the webanimation polyfill makes no difference. We also cannot downgrade the version because of the angular version.

We are also facing the same issue. ngx-chips version 1.9.2 and angular version is 6.0.7. Kindly provide some solution to fix this issue.

Also have observed this issue in Safari 11 - it looks as though the html is rendering successfully, but the display css is being reapplied as none after the items are rendered

The fix for this should have been released with v 1.9.3. If not please reopen :)

IE Version: 11.0.9600.19467
ngx-chips Version: 2.0.2

Still i have this issue. After click on the input field, i expect, that the dropdown is shown. But nothing is shown. @Gbuomprisco

Was this page helpful?
0 / 5 - 0 ratings

Related issues

altschuler picture altschuler  路  3Comments

EnochGao picture EnochGao  路  4Comments

rspandi1985 picture rspandi1985  路  4Comments

cyrilrbt picture cyrilrbt  路  4Comments

neilharding picture neilharding  路  5Comments