fix: scroll jumps in context menu

This commit is contained in:
thecodrr
2022-02-14 22:49:45 +05:00
parent 811fe12e79
commit 5d1dbf3176

View File

@@ -9,6 +9,19 @@ function useMenuFocus(items, onAction) {
const [focusIndex, setFocusIndex] = useState(-1);
const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
const moveItemIntoView = useCallback(
(index) => {
const item = items[index];
if (!item) return;
const element = document.getElementById(item.key);
if (!element) return;
element.scrollIntoView({
behavior: "auto",
});
},
[items]
);
const onKeyDown = useCallback(
(e) => {
const isSeperator = (i) => items && items[i]?.type === "seperator";
@@ -51,11 +64,12 @@ function useMenuFocus(items, onAction) {
default:
break;
}
if (nextIndex !== i) moveItemIntoView(nextIndex);
return nextIndex;
});
},
[items, isSubmenuOpen, onAction]
[items, isSubmenuOpen, moveItemIntoView, onAction]
);
useEffect(() => {
@@ -88,14 +102,6 @@ function Menu({ items, data, title, closeMenu }) {
if (item) onAction(e, item);
});
useEffect(() => {
const item = items[focusIndex];
if (!item) return;
const element = document.getElementById(item.key);
if (!element) return;
element.scrollIntoView({ behavior: "auto" });
}, [focusIndex, items]);
const subMenuRef = useRef();
useEffect(() => {
const item = items[focusIndex];