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

[Gbuomprisco]

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

[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)”