scroll item to center during search keyboard nav
This commit is contained in:
parent
7d23ca656b
commit
96ec0bea90
1 changed files with 13 additions and 6 deletions
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue