From 07c9f1f71126a278e4bb97250a2b098b56c0cfcb Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 9 Sep 2024 21:09:48 +0200 Subject: [PATCH] Fix `ListboxOptions` being incorrectly marked as `inert` (#3466) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR fixes an issue where the `ListboxOptions` component was incorrectly marked as `inert`. We only mark the other elements on the page as `inert` once the `Listbox` is in a visible state. The issue is that the `data.optionsElement` (a reference to the DOM node) was not populated with the actual DOM node yet at the time the `useInertOthers(…)` hook was applied. Due to the usage of `useEvent(…)`, instead of `useCallback(…)` the internal `useEffect(…)` hook didn't re-run because the `allowed` function was already stable. With this fix, the `allowed` function will change whenever its dependencies change. Fixes: #3464 --- packages/@headlessui-react/CHANGELOG.md | 4 +++- .../@headlessui-react/src/components/listbox/listbox.tsx | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index d4d6cf371a..1c6ba07023 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Fix `ListboxOptions` being incorrectly marked as `inert` ([#3466](https://github.com/tailwindlabs/headlessui/pull/3466)) ## [2.1.5] - 2024-09-04 diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx index e82cad3475..b4b9a724ee 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.tsx +++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx @@ -972,7 +972,10 @@ function OptionsFn( ? false : modal && data.listboxState === ListboxStates.Open useInertOthers(inertOthersEnabled, { - allowed: useEvent(() => [data.buttonElement, data.optionsElement]), + allowed: useCallback( + () => [data.buttonElement, data.optionsElement], + [data.buttonElement, data.optionsElement] + ), }) // We keep track whether the button moved or not, we only check this when the menu state becomes