NgbTypeahead by **Open on focus** with Table or ngFor elements

[sattha]

It looks like it's not possible to use NgbTypeahead by Open on focus with Table or ngFor elements

since the following example on ng-bootstrap, the focus and click Observable object is sharing among other ngFor elements. So, they trigger all NgbTypeahead event becuase example using merge operator.

export class NgbdTypeaheadFocus {
  model: any;

  @ViewChild('instance') instance: NgbTypeahead;
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
      map(term => (term === '' ? states
        : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );
  }
}

full example https://ng-bootstrap.github.io/#/components/typeahead/examples#focus

and even I try to binding event at ngAfterViewInit() on my component is no hope. Since, NgbTypeahead was setup everything at ngOnInit()

  @ViewChildren('ngbTypeahead') ngbTypeahead: QueryList<NgbTypeahead>;
  @ViewChildren('inputTypeahead') inputTypeahead: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.inputTypeahead.forEach((item: ElementRef, inputIndex: number) => {
      let instance: NgbTypeahead
        this.ngbTypeahead.some((value, index) => {
          if (inputIndex === index) {
            instance = value;
            return true;
          }
          return false;
        })

        instance.ngbTypeahead = (text$: Observable<string>) => text$.pipe(
          debounceTime(200),
          distinctUntilChanged(),
          map(term => term.length < 2 ? []
            : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
        );

      // this.renderer.listen(item.nativeElement, 'click', () => {
      // });
      // this.renderer.listen(item.nativeElement, 'focus', () => {
      // });

    })
  }

So we probably should provide the way to track focus and click event on each input.
implemented example https://stackblitz.com/edit/angular-y3i5ys

[sattha]

solved https://stackblitz.com/edit/angular-9am2t8. However, it seems like a hack.

[pkozlowski-opensource]

However, it seems like a hack.

Agreed. Planning to improve this in #2318