diff --git a/README.md b/README.md
index 683ea0f1..bb9b7514 100644
--- 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.
-
+
## Features
diff --git a/packages/search-ui/src/InputManager.ts b/packages/search-ui/src/InputManager.ts
index 2fb82e07..d9fc3d31 100644
--- 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
index 4891e5c8..456f7de3 100644
--- 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();