Typeahead selection issue when dropdown is longer than the page

[bjornharvold]

Bug description:

This video shows the issue
typeahead_issue.mp4.zip

In a nutshell, the typeahead is close to the bottom, the result list is long and goes past the bottom of the page. When the user tries to scroll down to the result she wants, it keeps on centering back on the form field; making it impossible to select what the entry. If there are a lot of similar items in the list. In the case of the city of Springfield, the query is searching on Springfield and the result formatter is displaying state information.

Link to minimally-working StackBlitz that reproduces the issue:

https://angular-zyurzt.stackblitz.io

Versions of Angular, ng-bootstrap and Bootstrap:

Angular:
10.x

ng-bootstrap:
7.x

Bootstrap:
4.5.0

[nickroberts]

Any progress / workarounds on this? It renders a long list impossible to use, unfortunately.

[GeeWee]

A workaround is to limit the size of the typeahead and then just provide the user with a scrollbar:

ngb-typeahead-window.dropdown-menu {
  max-height: 500px !important;
  overflow-y: auto;
}

[projectX21]

@GeeWee : I already had this solution, but keep in mind, that the scrolling with the keyboard arrows doesn't work. See StackBlitz: https://stackblitz.com/edit/angular-efdq3f?file=src%2Fapp%2Ftypeahead-template.ts
Type an 'a' in the input and try to scroll with the arrow down key.

Does anyone has a workaround, so that the window will be scrolled with the keyboard arrows?