Fix wrong scroll method in combobox causing body to scroll

ang-zeyu · Nov 13, 2022 · 35deac2 · 35deac2
1 parent 08b6b80
commit 35deac2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Easy, relevant, and efficient client-side search for static sites.
 
 InfiSearch is a client-side search solution made for static sites, depending on a pre-built index generated by a CLI tool.
 
-<img alt="preview of InfiSearch' UI" src="./docs/src/images/readme_picture.png" width="90%" />
+<img alt="preview of InfiSearch' UI" src="./docs/src/images/readme_picture.png" width="600px" style="max-width: 100%;" />
 
 ## Features
 

diff --git a/packages/search-ui/src/InputManager.ts b/packages/search-ui/src/InputManager.ts
@@ -61,7 +61,7 @@ export class IManager {
     that._mrlState = listContainerChildren[2] as HTMLElement;
     that._mrlResultContainer = listContainerChildren[3] as HTMLElement;
 
-    addKeyboardHandlers(_mrlInputEl, that._mrlResultContainer);
+    addKeyboardHandlers(_mrlInputEl, that._mrlResultContainer, _mrlScroller);
     that._mrlRefreshEmptyInputClass();
     that._mrlRefreshHeader();
 

diff --git a/packages/search-ui/src/utils/keyboard.ts b/packages/search-ui/src/utils/keyboard.ts
@@ -2,14 +2,14 @@ import { setActiveDescendant, unsetActiveDescendant } from './aria';
 
 export const SELECTED_OPTION_ID = 'infi-list-selected';
 
-function scrollListContainer(targetEl: any, listContainer: HTMLElement) {
-  const computedStyles = getComputedStyle(listContainer);
+function scrollListContainer(targetEl: any, scrollContainer: HTMLElement) {
+  const computedStyles = getComputedStyle(scrollContainer);
   if (['scroll', 'auto', 'overlay'].includes(computedStyles.overflowY)) {
     const top = targetEl.offsetTop
-      - listContainer.offsetTop
-      - listContainer.clientHeight / 2
+      - scrollContainer.offsetTop
+      - scrollContainer.clientHeight / 2
       + targetEl.clientHeight / 2;
-    listContainer.scrollTo({ top });
+    scrollContainer.scrollTo({ top });
   } else {
     targetEl.scrollIntoView({
       block: 'center',
@@ -21,7 +21,7 @@ export function focusEl(
   el: Element,
   focusedEl: HTMLElement,
   inputEl: HTMLInputElement,
-  listContainer: HTMLElement,
+  scrollContainer: HTMLElement,
   doScroll: boolean,
 ) {
   if (focusedEl) {
@@ -34,15 +34,19 @@ export function focusEl(
     el.classList.add('focus');
     el.setAttribute('aria-selected', 'true');
     el.setAttribute('id', SELECTED_OPTION_ID);
-    if (doScroll) scrollListContainer(el, listContainer);
+    if (doScroll) scrollListContainer(el, scrollContainer);
     setActiveDescendant(inputEl);
   } else {
-    if (doScroll) listContainer.scrollTo({ top: 0 });
+    if (doScroll) scrollContainer.scrollTo({ top: 0 });
     unsetActiveDescendant(inputEl);
   }
 }
 
-export function addKeyboardHandler(inputEl: HTMLInputElement, resultContainer: HTMLElement) {
+export function addKeyboardHandler(
+  inputEl: HTMLInputElement,
+  resultContainer: HTMLElement,
+  scrollContainer: HTMLElement,
+) {
   inputEl.addEventListener('keydown', (ev: KeyboardEvent) => {
     const { key } = ev;
     if (!['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(key)) {
@@ -62,10 +66,10 @@ export function addKeyboardHandler(inputEl: HTMLInputElement, resultContainer: H
     });
 
     if (key === 'ArrowDown') {
-      focusEl(opts[(focusedItemIdx + 1) % opts.length], focusedItem, inputEl, resultContainer, true);
+      focusEl(opts[(focusedItemIdx + 1) % opts.length], focusedItem, inputEl, scrollContainer, true);
     } else if (key === 'ArrowUp') {
       focusEl(
-        focusedItemIdx > 0 ? opts[focusedItemIdx - 1] : lastItem, focusedItem, inputEl, resultContainer, true,
+        focusedItemIdx > 0 ? opts[focusedItemIdx - 1] : lastItem, focusedItem, inputEl, scrollContainer, true,
       );
     } else if (key === 'Enter') {
       if (focusedItem)
@@ -76,7 +80,7 @@ export function addKeyboardHandler(inputEl: HTMLInputElement, resultContainer: H
       const pos = key === 'Home' ? 0 : inputEl.value.length;
       inputEl.focus();
       inputEl.setSelectionRange(pos, pos);
-      focusEl(undefined, focusedItem, inputEl, resultContainer, true);
+      focusEl(undefined, focusedItem, inputEl, scrollContainer, true);
     }
 
     ev.preventDefault();