Keyboard navigation does not scroll with max-height and overflow: auto

[heinrichti]

• System Information

  • Chrome 90
  • Windows 10

• Describe the bug
  When navigating with the keyboard the scrollable resultlist does not scroll with the selection.

• To Reproduce
  I created a jsfiddle that demonstrates the behavior: https://jsfiddle.net/fzkyvrab/3/
  Enter the search box, start typing 'f' and press down with keyboard a few times. The selected item will be out of the visible area and you have to manually scroll down to see it

• Expected behavior
  The search field should make it so that the active element is always visible (scrolled to it)

[TarekRaafat]

Hello @TimHeinrich,

Unfortunately, list scrolling is not supported in v9.

But it's already implemented in the coming major release v10 if you would like to check it and share your thoughts.

v10 is expected to be released within the coming two weeks.

Cheers, and have a nice day! :)

[heinrichti]

Hi @TarekRaafat, thank you, I didn't expect a solution this quickly!

Here are a few thoughts on the scrolling: It works out of the box, this is a great improvement for me 👍

A few things I noticed: The class autoComplete_selected does not seem to be set anymore, so I updated my CSS like this, which works again:

.autoCompleteWrapper >>> [aria-selected='true'],
.autoCompleteWrapper >>> .autoComplete_result:hover {
  cursor: pointer;
  background-color: rgba(51, 217, 178,0.2);
}

The smooth scrolling effect looks is nice, but if I press and hold the down key it is way too slow (for me it just scroll-wiggles a little up and down while the selection goes through the list), so it would be nice to have a way to disable smooth scrolling or detect that I am holding the key down and only scroll smooth if I haven't scrolled in the last few ms or something like that.

Thanks again, and a nice day to you as well :)

[TarekRaafat]

Very good point and I believe that your first suggestion would be more flexible because it would allow you to programmatically achieve the second behavior as well.

Thanks!

[TarekRaafat]

Auto-Scroll has been added to v10.0.3, but unfortunately, I had to roll back and use another method for scrolling instead of scrollIntoView due to its weird behavior of moving the entire page while scrolling.

Yet, I'll keep investigating other methods until I achieve the previous smooth scrolling behavior with the auto switch, which I really liked, and I'll let you know as soon as I figure it out.

For the time being, you should be good to go with the current functionality, and of course, feel free to let me know if you have any other thoughts.

Have a nice day! :)