scroll item to center during search keyboard nav

This commit is contained in:
Matt Dunn-Rankin 2020-04-25 20:44:59 -07:00
parent 7d23ca656b
commit 96ec0bea90

View file

@ -188,6 +188,7 @@ function SearchResults({
const prevLabel = e.target.closest("label").previousSibling;
if (prevLabel) {
prevLabel.querySelector("input[type=checkbox]").focus();
prevLabel.scrollIntoView({ block: "center" });
e.preventDefault();
} else {
// If we're at the top of the list, move back up to the search box!
@ -199,6 +200,7 @@ function SearchResults({
const nextLabel = e.target.closest("label").nextSibling;
if (nextLabel) {
nextLabel.querySelector("input[type=checkbox]").focus();
nextLabel.scrollIntoView({ block: "center" });
e.preventDefault();
}
};
@ -261,13 +263,8 @@ function ScrollTracker({ children, threshold, onScrolledToBottom }) {
if (!containerRef.current) {
return;
}
for (let el = containerRef.current; el.parentNode; el = el.parentNode) {
if (getComputedStyle(el).overflow === "auto") {
scrollParent.current = el;
break;
}
}
scrollParent.current = getScrollParent(containerRef.current);
scrollParent.current.addEventListener("scroll", onScroll);
return () => {
@ -280,4 +277,14 @@ function ScrollTracker({ children, threshold, onScrolledToBottom }) {
return <div ref={containerRef}>{children}</div>;
}
function getScrollParent(target) {
for (let el = target; el.parentNode; el = el.parentNode) {
if (getComputedStyle(el).overflow === "auto") {
return el;
}
}
throw new Error(`found no scroll parent`);
}
export default SearchPanel;