Fix ListboxOptions being incorrectly marked as inert (#3466)

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

Author: RobinMalfait

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
 

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

@@ -972,7 +972,10 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     ? 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