ensure the active MenuItem is scrolled into view

Fixes: #227
2021-02-05 18:09:41 +01:00
parent cf1e92d62f
commit 9e05bbe8d8
3 changed files with 16 additions and 1 deletions
@@ -537,7 +537,7 @@ function Option<
    let d = disposables()
    d.nextFrame(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
    return d.dispose
-  }, [active, state.listboxState])
+  }, [id, active, state.listboxState])

  let handleClick = useCallback(
    (event: { preventDefault: Function }) => {
@@ -423,6 +423,14 @@ function Item<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
  let id = `headlessui-menu-item-${useId()}`
  let active = state.activeItemIndex !== null ? state.items[state.activeItemIndex].id === id : false

+  useIsoMorphicEffect(() => {
+    if (state.menuState !== MenuStates.Open) return
+    if (!active) return
+    let d = disposables()
+    d.nextFrame(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
+    return d.dispose
+  }, [id, active, state.menuState])
+
  let bag = useRef<MenuItemDataRef['current']>({ disabled })

  useIsoMorphicEffect(() => {