Navigating options should not scroll page

[stefanprobst]

Description

When navigating options in the combobox popup, the scroll position on the page should not change.

Reproduction

Steps

1. Go to https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/ and place cursor in the second combobox.
2. Press Down arrow key a couple of times and see scroll position change.

https://user-images.githubusercontent.com/20753323/118694174-15375c00-b80c-11eb-8b92-3f2f2ef4b1a5.mp4

Environment

• OS: [e.g. Windows / Linux / macOS / iOS / Android]
• Browser: [e.g. Chrome, Safari] Firefox 88
• Autocomplete version: [e.g. 1.0.0] 1.0.1

[francoischalifour]

Thanks for the report.

We rely on scrollIntoViewIfNeeded if the browser supports it, and otherwise fallback to scrollIntoView: https://github.com/algolia/autocomplete/blob/e81c31fbc89ad72229ed84b0318873d442ceb19b/packages/autocomplete-core/src/onKeyDown.ts#L36-L40

The scrollIntoViewIfNeeded method is not compatible with Firefox, which is why it's reacting as such on your end. We originally didn't include a polyfill because of bundle size constraints.

Would you rather prefer not scrolling at all if the browser doesn't support scrollIntoViewIfNeeded?

[Haroenv]

We could check whether the item is already in view in the else?

[stefanprobst]

We could check whether the item is already in view in the else?

:+1:

Would you rather prefer not scrolling at all if the browser doesn't support scrollIntoViewIfNeeded?

i guess scrollintoview would still be needed in case the popup has overflow (i.e. there are more options than fit in the popup max-height)?