OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

scroll item to center during search keyboard nav

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-25 20:44:59 -07:00
parent 7d23ca656b
commit 96ec0bea90
1 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/SearchPanel.js
View file

@ -188,6 +188,7 @@ function SearchResults({
const prevLabel = e.target.closest("label").previousSibling; const prevLabel = e.target.closest("label").previousSibling;
if (prevLabel) { if (prevLabel) {
prevLabel.querySelector("input[type=checkbox]").focus(); prevLabel.querySelector("input[type=checkbox]").focus();
prevLabel.scrollIntoView({ block: "center" });
e.preventDefault(); e.preventDefault();
} else { } else {
// If we're at the top of the list, move back up to the search box! // 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; const nextLabel = e.target.closest("label").nextSibling;
if (nextLabel) { if (nextLabel) {
nextLabel.querySelector("input[type=checkbox]").focus(); nextLabel.querySelector("input[type=checkbox]").focus();
nextLabel.scrollIntoView({ block: "center" });
e.preventDefault(); e.preventDefault();
} }
}; };
@ -261,13 +263,8 @@ function ScrollTracker({ children, threshold, onScrolledToBottom }) {
if (!containerRef.current) { if (!containerRef.current) {
return; 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); scrollParent.current.addEventListener("scroll", onScroll);
return () => { return () => {
@ -280,4 +277,14 @@ function ScrollTracker({ children, threshold, onScrolledToBottom }) {
return <div ref={containerRef}>{children}</div>; 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; export default SearchPanel;