Skip to content

Commit 5c0b27b

Browse files
committed
Copied the scroll.js file from github/auto-complete-element.
Scrolls to the target list element when navigating.
1 parent f2e3546 commit 5c0b27b

File tree

2 files changed

+18
-0
lines changed

2 files changed

+18
-0
lines changed

src/combobox-nav.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* @flow strict */
22

3+
import {scrollTo} from './scroll'
4+
35
export function install(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): void {
46
input.addEventListener('compositionstart', trackComposition)
57
input.addEventListener('compositionend', trackComposition)
@@ -103,6 +105,7 @@ export function navigate(
103105
if (target === el) {
104106
input.setAttribute('aria-activedescendant', target.id)
105107
target.setAttribute('aria-selected', 'true')
108+
scrollTo(list, target)
106109
} else {
107110
el.setAttribute('aria-selected', 'false')
108111
}

src/scroll.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* @flow strict */
2+
3+
export function scrollTo(container: HTMLElement, target: HTMLElement) {
4+
if (!inViewport(container, target)) {
5+
container.scrollTop = target.offsetTop
6+
}
7+
}
8+
9+
function inViewport(container: HTMLElement, element: HTMLElement): boolean {
10+
const scrollTop = container.scrollTop
11+
const containerBottom = scrollTop + container.clientHeight
12+
const top = element.offsetTop
13+
const bottom = top + element.clientHeight
14+
return top >= scrollTop && bottom <= containerBottom
15+
}

0 commit comments

Comments
 (0)