ensure the active MenuItem is scrolled into view

Fixes: #227

Author: RobinMalfait

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -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 }) => {

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -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(() => {

packages/@headlessui-vue/src/components/menu/menu.ts

@@ -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()