question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 Screenshot_20190801-222814 Screenshot_20190801-222844

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 Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
issue-label-bot[bot]commented, Aug 1, 2019

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.

4reactions
achimhacommented, Oct 12, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typeahead.js not showing dropdown - Stack Overflow
I'm getting source from a remote location using the dataType:'jsonp' and if i see the developer tool on chrome, I'm getting a response...
Read more >
SurgeWeb Change history - Surgemail
Fix: Equals key stroke to move to done folder was not working in FF - Fix: Lots more strings are now language translatable...
Read more >
3347 - onChange event is not fired when an option is selected ...
working when i select an item in the dropdown with mouse. when i use Up and Down Arrows of keyboard drop down change...
Read more >
datatable header not scrolling with body - You.com
I have a datatable in which the table body scrolls but the table header doesn't scroll. I want to make the table header...
Read more >
Workarounds: Manipulating a survey at runtime using Javascript
This workaround allow to answer the question on key 0-9 (0 is for the 10 answer). Follow issues are supported at the moment:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found