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.

algolia-2021-05-18_19.01.51.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:

autocomplete/packages/autocomplete-core/src/onKeyDown.ts

Lines 36 to 40 in e81c31f

	if ((nodeItem as any).scrollIntoViewIfNeeded) {
	(nodeItem as any).scrollIntoViewIfNeeded(false);
	} else {
	nodeItem.scrollIntoView(false);
	}

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?

👍

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