Using arrow keys to navigate typeahead response causes page to move when typeahead below the fold

[deeg]

https://plnkr.co/edit/vk7MZB7JXnE40U1AeU0z?p=preview

Go to the first example and type in a letter so some values show up. Then use the down arrow to try to scroll through those values. This moves the page so the highlighted value is at the very bottom of the page rather than keeping the page where it is and moving just the highlighted item.

This is also apparent on the ui-bootstrap homepage demo as the Plunk is just a copy of that example.

[deeg]

It has to do with this code.

I can try to put out a PR to fix this, what would people think the best solution is? Only call scroll into view if the highlighted item is not in the viewport currently?

@wesleycho, any opinions?

[wesleycho]

To only call it if it isn't in the viewport can cause performance issues since we then have to calculate positional & size data to determine whether it is in the view or not.

Any solution needs to work for both situations and remain performant - other than that, I'm not too opinionated here.

[deeg]

@wesleycho, @icfantv, @Foxandxss , I don't see many options besides doing some calculation to see if the element is in the viewport.

If you don't want to add in that calculation I suggest getting rid of the scroll behavior all together.

That feature is really adding in logic/functionality not provided by bootstrap's typeahead. If you go to this page with their example, you can see they do not scroll into the viewport if the results go beyond the fold. They instead let you scroll down yourself.

If you don't want to do any calculation position, my suggestion is we get rid of the feature all together. It makes it a much worse user experience when the page jumps when it is not needed, and it is not a feature natively offered by bootstrap's typeahead. I can post a video if it is unclear why this is a bad user experience.

Let me know what you guys think, and I can open a PR with the fix.

[wesleycho]

The problem situation is when the dropdown menu is small and becomes a scroll container - if you don't focus the element, then one will never see it selected in the dropdown.

[deeg]

Okay, thanks for explaining the situation which caused the code to be put in.

I will take a look to keep that functionality while removing the unwanted page jump.