ngx-chips: Type Ahead Dropdown doesn't work on Safari Update: No Longer works on Chrome/Firefox as of 2.0.1
PLEASE MAKE SURE THAT:
- you searched similar issues online (9/10 issues in this repo are solved by googling, so please…do it)
- you provide an online demo I can see without having to replicate your environment
- you help me by debugging your issue, and if you can’t, do go on filling out this form
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 typing into the tags field, on Chrome and Firefox a dropdown list of available tags displays after a few characters, on Safari the list never appears.
Expected behavior
I expect the list to appear on all browsers consisently
Minimal reproduction of the problem with instructions (if applicable)
You can see this live here: WeAnimalsArchive
Start typing words in the top row - dog, cat, etc., and you should see a dropdown list of keywords in the database appear. On Safari, the list doesn’t appear, on Chrome and Firefox it appears and works as expected.
My component is as follows:
<tag-input formControlName="dragAndDropObjectsAnd"
[dragZone]="'zone1'"
[editable]="true"
[theme]="'bootstrap'"
#tagand (keyup.enter)="onEnter($event)"
[placeholder]="''"
[separatorKeyCodes]="[32, 9]"
[secondaryPlaceholder]="placeholderAnd"
[class]="light"
>
<tag-input-dropdown
[focusFirstElement]="true"
[autocompleteItems]="keywords"
[displayBy]="'name'"
[identifyBy]="'id'">
<ng-template let-item="item" let-index="index">
{{ item.name }}
</ng-template>
</tag-input-dropdown>
</tag-input>
What do you use to build your app?. Please specify the version
Webpack 3.11.0
Angular version:
Angular 7.2.15
ngx-chips version:
ngx-chips version 2.0.0-beta.0
Browser: [ Works on (Mac OS X): Chrome Version 74.0.3729.169 Firefox 67.0
Doesn’t work on (Mac OS X): Safari Version 12.1.1 (14607.2.6.1.1) ]
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 1
- Comments: 18 (2 by maintainers)
Not totally sure but I am thinking it has something to do with the animations polyfill
I can get the dropdown list to appear if i set [showDropdownIfEmpty]=“true”, but none of the items in the list can be selected and added, no matter if you click them, or arrow down to them and hit enter.
In the demo - some of the autocomplete examples work, and some are broken. https://angular-mfppay.stackblitz.io/
“Tags within an autocomplete component” seems to work in the demo, but the same implementation doesn’t work on my end with 2.0.1. Nothing from the dropdown is selectable. It seems like the demo is not current, since “Tags within an autocomplete component” is different in the current ngx-chips/demo/home/home.html, which only lists “Tags within an autocomplete component (clear on blur events)”
Thanks! Will try asap
If we can be of any help testing, let us know!
It does work as expected in my project, if i go back to version 1.9.4.
There was a bug recently in https://ng-bootstrap.github.io/#/components/dropdown/ that sounds like what @gskrap describes where dropdowns could be enabled, but nothing could be selected without dismissing the dropdown instead - not sure if that’s in anyway related to what we’re seeing here, but I thought it was worth mentioning.
This is now broken in Chrome and Firefox as well as of today’s ngx-chips 2.0.1 release.
I am also having the issue, ngx-chips 2.0.0-beta.0
Angular CLI: 7.3.9 Node: 10.15.3 OS: linux x64 Angular: 7.2.15 … animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser … platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.13.9 @angular-devkit/build-angular 0.13.9 @angular-devkit/build-optimizer 0.13.9 @angular-devkit/build-webpack 0.13.9 @angular-devkit/core 7.3.9 @angular-devkit/schematics 7.3.9 @angular/cli 7.3.9 @ngtools/webpack 7.3.9 @schematics/angular 7.3.9 @schematics/update 0.13.9 rxjs 6.3.3 typescript 3.2.4 webpack 4.29.0
I also caught this bug a few months ago. This issue appeared after updating to Angular 7.2.5 and all next versions have it (7.2.12, beta versions of 8, and 8.0.x itself). The last working version is 7.2.4 in my case.