Ensure we are not freezing data when the static prop is used (#3779)

This PR fixes an issue where a listbox with the `static` option had a
delayed `selected` value.

This was happening because of 2 reasons:

1. The `isSelected` function had stale data
2. We use a "frozen value", but we shouldn't do that when the listbox
options are using the `static` option.

The frozen data is used to prevent UI jumps when you have transitions.
For example, if you fade out the listbox when closing then if you select
an option the selected state (and a checkmark for example) would move
around to the newly selected option while the listbox is fading out. To
prevent that we "freeze" the selected value until the listbox is fully
closed. This behaves the same as a native select element.

Fixes: #3778

## Test plan

Tested the fix with the reproduction from the issue:


https://github.com/user-attachments/assets/fbbc2ec3-321b-4e66-b0fc-df5a483dfbba

---------

Co-authored-by: Jordan Pittman <[email protected]>

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
+
+- Ensure we are not freezing data when the `static` prop is used ([#3779](https://github.com/tailwindlabs/headlessui/pull/3779))
 
 ## [2.2.7] - 2025-07-30
 

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

@@ -1332,14 +1332,20 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   // We should freeze when the combobox is visible but "closed". This means that
   // a transition is currently happening and the component is still visible (for
   // the transition) but closed from a functionality perspective.
-  let shouldFreeze = visible && comboboxState === ComboboxState.Closed
+  //
+  // When the `static` prop is used, we should never freeze, because rendering
+  // is up to the user.
+  let shouldFreeze = visible && comboboxState === ComboboxState.Closed && !props.static
 
   let options = useFrozenData(shouldFreeze, data.virtual?.options)
 
   // Frozen state, the selected value will only update visually when the user re-opens the <Combobox />
   let frozenValue = useFrozenData(shouldFreeze, data.value)
 
-  let isSelected = useEvent((compareValue) => data.compare(frozenValue, compareValue))
+  let isSelected = useCallback(
+    (compareValue: unknown) => data.compare(frozenValue, compareValue),
+    [data.compare, frozenValue]
+  )
 
   // Map the children in a scrollable container when virtualization is enabled
   let newDataContextValue = useMemo(() => {

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

@@ -629,12 +629,18 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   // We should freeze when the listbox is visible but "closed". This means that
   // a transition is currently happening and the component is still visible (for
   // the transition) but closed from a functionality perspective.
-  let shouldFreeze = visible && listboxState === ListboxStates.Closed
+  //
+  // When the `static` prop is used, we should never freeze, because rendering
+  // is up to the user.
+  let shouldFreeze = visible && listboxState === ListboxStates.Closed && !props.static
 
   // Frozen state, the selected value will only update visually when the user re-opens the <Listbox />
   let frozenValue = useFrozenData(shouldFreeze, data.value)
 
-  let isSelected = useEvent((compareValue: unknown) => data.compare(frozenValue, compareValue))
+  let isSelected = useCallback(
+    (compareValue: unknown) => data.compare(frozenValue, compareValue),
+    [data.compare, frozenValue]
+  )
 
   let selectedOptionIndex = useSlice(machine, (state) => {
     if (anchor == null) return null