autocomplete

autocomplete copied to clipboard

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

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?

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

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)?