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(() => {
@@ -9,6 +9,7 @@ import {
  nextTick,
  InjectionKey,
  Ref,
+  watchEffect,
 } from 'vue'
 import { Features, render } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
@@ -370,6 +371,12 @@ export let MenuItem = defineComponent({
    onMounted(() => api.registerItem(id, dataRef))
    onUnmounted(() => api.unregisterItem(id))

+    watchEffect(() => {
+      if (api.menuState.value !== MenuStates.Open) return
+      if (!active.value) return
+      nextTick(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
+    })
+
    function handleClick(event: MouseEvent) {
      if (disabled) return event.preventDefault()
      api.closeMenu()