feat(js): scroll to top when query changes

[francoischalifour]

Description

This scrolls to the top of the panel when the query changes (i.e., when new results come in) so that users don't have to.

How

We introduce a new CSS utility class in the theme called .aa-Panel--Scrollable which hints Autocomplete that this is the container responsible for displaying the list of items.

By default, this CSS class is attached to .aa-PanelLayout, but when we introduce the Preview Panel plugin, it will be attached to the left child of .aa-PanelLayout.

Whenever the query changes, we scroll to the top of this scrollable container.

Preview

Before

After

[shortcuts]

Could it make sense to expose this as a boolean (e.g. scrollToTopOnQueryUpdate)? I feel like this could be something that the user would want to toggle in some special cases

[francoischalifour]

@shortcuts When would you want to not have this behavior?

[shortcuts]

@francoischalifour in some e-commerce cases I guess. I could imagine some side-by-side sections (like https://www.ldlc.com/) where you'd probably don't want to scroll all of them but handle it separately.

[francoischalifour]

@shortcuts That's exactly why we have this .aa-Panel--Scrollable CSS class, you can add it to the containers you need 🙂

That makes me think that we should use document.querySelectorAll to scroll to the top of all the containers marked with this CSS class.

[Haroenv]

smart choice