feat(js): scroll to top when query changes (#457)

algolia · Feb 19, 2021 · 706939c · 706939c
1 parent dd28098
commit 706939c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -223,6 +223,19 @@ export function autocomplete<TItem extends BaseItem>(
         setPanelPosition();
       }
 
+      // We scroll to the top of the panel whenever the query changes (i.e. new
+      // results come in) so that users don't have to.
+      if (state.query !== prevState.query) {
+        const scrollablePanels = document.querySelectorAll(
+          '.aa-Panel--Scrollable'
+        );
+        scrollablePanels.forEach((scrollablePanel) => {
+          if (scrollablePanel.scrollTop !== 0) {
+            scrollablePanel.scrollTop = 0;
+          }
+        });
+      }
+
       debouncedRender({ state });
     };
 

diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
@@ -165,7 +165,9 @@ export function renderPanel<TItem extends BaseItem>(
     </section>
   ));
 
-  const children = <div className="aa-PanelLayout">{sections}</div>;
+  const children = (
+    <div className="aa-PanelLayout aa-Panel--Scrollable">{sections}</div>
+  );
 
   render({ children, state, sections, createElement, Fragment }, dom.panel);
 }
diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
@@ -203,7 +203,6 @@ body {
     height: 100%;
     margin-top: var(--aa-spacing-half);
     max-height: var(--aa-panel-max-height);
-    overflow-y: auto;
     padding-bottom: var(--aa-spacing-half);
     padding-top: var(--aa-spacing-half);
     position: relative;
@@ -221,6 +220,9 @@ body {
       overflow: hidden;
     }
   }
+  .aa-Panel--Scrollable {
+    overflow-y: auto;
+  }
 
   // when a query isn't resolved yet
   &.aa-Panel--stalled {

diff --git a/packages/website/docs/autocomplete-theme-classic.md b/packages/website/docs/autocomplete-theme-classic.md
@@ -155,8 +155,9 @@ autocomplete({
 
 ## CSS utility classes
 
-- `aa-ActiveOnly`: displays an element only when the item is active
-- `aa-TouchOnly`: displays an element only on touch devices.
+- `.aa-Panel--Scrollable`: declares the scrollable container of the panel
+- `.aa-ActiveOnly`: displays an element only when the item is active
+- `.aa-TouchOnly`: displays an element only on touch devices.
 
 ## Dark mode