diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 8f6b3e5a06..85e6c58bb4 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/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 diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx index e2c032bc5d..6cbf26d49e 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.tsx +++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx @@ -966,7 +966,7 @@ function OptionsFn( 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) => { searchDisposables.dispose() diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx index 451daf5ed7..329b303a9d 100644 --- a/packages/@headlessui-react/src/components/menu/menu.tsx +++ b/packages/@headlessui-react/src/components/menu/menu.tsx @@ -639,7 +639,7 @@ function ItemsFn( 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,