Type Ahead Dropdown doesn't work on Safari Update: No Longer works on Chrome/Firefox as of 2.0.1

[alignsoft]

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)
]

[dmitrynop]

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.

[mmiranda-exegy]

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

[alignsoft]

This is now broken in Chrome and Firefox as well as of today's ngx-chips 2.0.1 release.

[gskrap]

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)"

[alignsoft]

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.

[gskrap]

Hmm, are any of the dropdowns on that page https://ng-bootstrap.github.io/#/components/dropdown/ supposed to update when you make a selection? Because they don't when I try. It seems like they're just dismissed. Also not sure if it's related, but that is what I'm experiencing with ngx-chips. Can't select any option, dropdown just dismisses.

Here's an example, broken:

autocompleteItems = [{display: 'item2', value: 2}, {display: 'item3', value: 3}]

  <tag-input [ngModel]="[{display: 'item1', value: 1}]"
             placeholder="Items"
             secondaryPlaceholder="+ Item">
    <tag-input-dropdown [showDropdownIfEmpty]="true"
                        [appendToBody]="false"
                        [autocompleteItems]="autocompleteItems">
    </tag-input-dropdown>
  </tag-input>`

You can add items by typing them in and pressing enter, but not from the dropdown.

[alignsoft]

The update that resolved that issue was just recent - 4.2.1 I believe, so it's possible they haven't updated the demo site with the new version. I can confirm that it was an issue previously (not sure which version of Angular we started noticing - 7.2.x I believe, but I can confirm it's fixed as of ngBootstrap 4.2.1 with Angular 7.2.15.

[gskrap]

I bumped my angular version from 7.2.0 to 7.2.15, and am still experiencing the same issue. I don't have ng-bootstrap as a direct dependency in my project.

Does my above code work for you? The example you linked to in your original post (WeAnimalsArchive) does work as expected for me in Chrome.

[gskrap]

Here is a stackblitz with my problem. You can see that you can't click the item in the dropdown to add it.

https://stackblitz.com/edit/angular-wt3dgm?file=src%2Fapp%2Fapp.component.html

[gskrap]

It does work as expected in my project, if i go back to version 1.9.4.

[alignsoft]

I'll have to try rolling back to 1.9.4 when I get back to my office later today and see if that resolves this in the short term.

Your stackblitz example works for me in Chrome, but not Safari, so that seems to mirror my experience with the 2.0.0-beta-0 release issue I initially reported.

[Gbuomprisco]

Not totally sure but I am thinking it has something to do with the animations polyfill

[alignsoft]

If we can be of any help testing, let us know!

[dmitrynop]

This seems to be a known issue for animations with the state of "display: none."
I think nothing bad will happen if we get rid of it and use just opacity/visibility css properties in this case. I have created PR in ng2-material-dropdown for this.

[Gbuomprisco]

Thanks! Will try asap

[dmitrynop]

@Gbuomprisco, did you have a chance to take a look at this? I tested behaviour of the ngx-chips demo app using the fixed version of ng2-material-dropdown. Everything looks fine to me in Safari / Chrome / Firefox.
I faced with some complications when I was trying to start dev env in ng2-material-dropdown itself, but a very easy trick with symlinks and preserve symlinks option helps to bypass them. Fortunately, the package build runs without problems.

[alignsoft]

Has there been any progress on this? I noticed a new release but I can’t find any release notes in the 2.x versions. Thanks!

[azuxx]

Hi, can we try dmitrynop solution please? I could not be able to link :dmitrynop npm module of ng2-material-dropdown on installed module of your ngx-chips.
my package json:
"ng2-material-dropdown": "https://github.com/dmitrynop/ng2-material-dropdown.git#fix-animation-in-safari", "ngx-chips": "2.0.2"

ngx-chips still uses its own ng2-material-dropdown (0.10.1)

Waiting for the merge🙏🏻
Cheers,
Andrea