Typeahead dropdown not showing on key stroke in Android Chrome/FF

[diogen737]

Describe the bug
Hi! Appreciate your lib very much but I'm having a little trouble with typeahead feature. Hope you could help me here.

Here's my setup which is pretty standard:

<ng-select [ngModel]="[]"
           [items]="tags$ | async"
           [typeahead]="tagsSubject$"
           [bindLabel]="'fondname'"
           [addTag]="false"
           [multiple]="true"
           [hideSelected]="true"
           [trackByFn]="tagsTrackByFn"
           [loading]="tagsLoading"
           [disabled]="disableTagsInput"
           [clearable]="false"
           [clearOnBackspace]="false"
           [placeholder]="'Search: Name, ISIN, Ticker'"
           (add)="tagAdded($event)"
           (remove)="tagRemoved($event.value)">
</ng-select>

public tags$: Observable<EtfQuickSearchProduct[]>;
public tagsSubject$ = new Subject<string>();

this.tags$ = this.tagsSubject$
      .pipe(
          tap(() => this.tagsLoading = true),
          debounceTime(500),
          distinctUntilChanged(),
          switchMap(query => this.dataService.quickSearchRequest(query, 5)),
          map(data => data.count ? data.results : []),
          tap(() => this.tagsLoading = false),
          catchError(() => of([])),
      );

Everything works just fine on desktop Chrome, Firefox, Safari and on iOS Safari.
But on Android Chrome and Firefox typeahead doesn't work as expected. tagsSubject$ pipe is firing only after blurring input or entering 'space' symbol, not after last letter entered. Hitting 'Enter' also doesn't help.

Expected behavior
On Android Chrome/FF dropdown should API call should fire and dropdown should appear after letter is entered.

I suspect it has something to do with ComposeStart/ComposeEnd/Input event for inner input.

Screenshots

Smartphone (please complete the following information):

• Device: OnePlus 5
• OS: Android 8.1.0
• Browser Chrome 75.0.3770.143

Additional context

• Angular: 8.1.2
• ng-select: 3.0.5

[issue-label-bot]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.82. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[diogen737]

update: downgrading to ng-select@3.0.4 solves the problem

[varnastadeus]

from the screens, I can see that you are in some sort of composition mode that's why ng-selects waits until you will leave it. FYI - on my android with a regular keyboard it works as expected

[diogen737]

@varnastadeus changing keyboard from Google Keyboard to Swift also solves problem. But I cannot tell all my users to switch keyboard 😃

[me-amit]

@diogen737 ,
I am also facing same issue on android. You got any workaround for it.
I have created a stack-blitz. Please open it on mobile and check to verify the issue.
stack-blitz

On mobile if we type and clear the text then it is showing but not showing while seaching only no items.
I am working on angular 6 "@ng-select/ng-select": "2.20.5"

Smartphone (please complete the following information):

Device: Realme 3 Pro
OS: Android 9
Browser Chrome 76.0.3809.89
Additional context

[achimha]

Any idea how to fix this other than downgrading ng-select?

[andreo-k]

this ugly workaround works

      <ng-select [items]="dataService.regions$ | async"
                 bindLabel="text"

                 [addTag]="false"
                 [multiple]="true"
                 [hideSelected]="true"
                 placeholder="Regions"
                 clearAllText="Cleanup"
                 notFoundText="Not found"
                 typeToSearchText="Start typing"
                 [loading]="loading"
                 (keydown)="rergionKeyDown($event)"
                 [typeahead]="dataService.regionName$"
                 (change)="regionChanged($event)"
                 [(ngModel)]="regions">

and in code

rergionKeyDown(e) {
this.dataService.regionName$.next(e.target.value);
}

[github-actions]

🎉 This issue has been resolved in version 3.5.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[lauramuoz1993]

The version "@ng-select/ng-select": "~2.16.0" it's the option.