Move focus to ListboxOptions and MenuItems when they are rendered later (#3112)

* ensure `useEffect` is executed again if ref contents changed since last render

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure the `multiple` prop is typed correctly when passing explicit types to the `Combobox` component ([#3099](https://github.com/tailwindlabs/headlessui/pull/3099))
 - Omit `nullable` prop from `Combobox` component ([#3100](https://github.com/tailwindlabs/headlessui/pull/3100))
 - Ensure anchored components are properly stacked on top of `Dialog` components ([#3111](https://github.com/tailwindlabs/headlessui/pull/3111))
+- Move focus to `ListboxOptions` and `MenuItems` when they are rendered later ([#3112](https://github.com/tailwindlabs/headlessui/pull/3112))
 
 ### Changed
 

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

@@ -966,7 +966,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     if (container === getOwnerDocument(container)?.activeElement) return
 
     container?.focus({ preventScroll: true })
-  }, [data.listboxState, data.optionsRef])
+  }, [data.listboxState, data.optionsRef, data.optionsRef.current])
 
   let handleKeyDown = useEvent((event: ReactKeyboardEvent<HTMLUListElement>) => {
     searchDisposables.dispose()

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

@@ -639,7 +639,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
     if (container === ownerDocument?.activeElement) return
 
     container.focus({ preventScroll: true })
-  }, [state.menuState, state.itemsRef, ownerDocument])
+  }, [state.menuState, state.itemsRef, ownerDocument, state.itemsRef.current])
 
   useTreeWalker({
     container: state.itemsRef.current,