Ensure --button-width and --input-width are always up to date (#3786)

This PR fixes an issue where the `--button-width` and `--input-width`
CSS variables weren't always up to date.

We compute these values initially when the component mounts based on the
`getBoundingClientRect` of the button and input elements.

To ensure we catch changes in size, we setup a `ResizeObserver` that
watches for changes to the button and input elements.

Unfortunately, `ResizeObserver` doesn't fire when the size changes due
to CSS properties such as `transform` or `scale`. As far as I can tell,
there isn't a single event or Observer we can use to catch all possible
changes.

One solution to this problem would be to delay the computation of the
sizes until after all transitions have completed and then we could even
introduce a small delay to ensure everything is in its final state.

However, you could literally use `hover:scale-110` on the Listbox button
which would mean that the size changes whenever you hover over the
button.

To fix this in a more generic way, we setup a `requestAnimationFrame`
loop that checks the size of the button and input elements on each
frame. If the size has changed, we update the CSS variables.

Note: we will only re-render if the size has actually changed, so this
shouldn't cause unnecessary re-renders.

The internal hook we use (`useElementSize`) also now receives an
`enabled` option such that we only run this `requestAnimationFrame` loop
when the component is enabled.

For components such as the `Combobox`, `Listbox` and `Menu` that means
that we only start measuring when the corresponding dropdown is in an
open state.

Hopefully we can fix this kind of issue with an Observer in the future
(e.g.: `PerformanceObserver` with `LayoutShift`
(https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift)) but this
is still experimental today.

Fixes: #3612
Fixes: #3598

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support `<summary>` as a focusable element inside `<details>` ([#3389](https://github.com/tailwindlabs/headlessui/pull/3389))
 - Fix `Maximum update depth exceeded` crash when using `transition` prop ([#3782](https://github.com/tailwindlabs/headlessui/pull/3782))
 - Ensure pressing `Tab` in the `ComboboxInput`, correctly syncs the input value ([#3785](https://github.com/tailwindlabs/headlessui/pull/3785))
+- Ensure `--button-width` and `--input-width` have the latest value ([#3786](https://github.com/tailwindlabs/headlessui/pull/3786))
 
 ## [2.2.7] - 2025-07-30
 

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

@@ -1337,8 +1337,8 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     style: {
       ...theirProps.style,
       ...style,
-      '--input-width': useElementSize(inputElement, true).width,
-      '--button-width': useElementSize(buttonElement, true).width,
+      '--input-width': useElementSize(visible, inputElement, true).width,
+      '--button-width': useElementSize(visible, buttonElement, true).width,
     } as CSSProperties,
     onWheel: activationTrigger === ActivationTrigger.Pointer ? undefined : handleWheel,
     onMouseDown: handleMouseDown,

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

@@ -794,7 +794,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     style: {
       ...theirProps.style,
       ...style,
-      '--button-width': useElementSize(buttonElement, true).width,
+      '--button-width': useElementSize(visible, buttonElement, true).width,
     } as CSSProperties,
     ...transitionDataAttributes(transitionData),
   })

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

@@ -581,7 +581,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
     style: {
       ...theirProps.style,
       ...style,
-      '--button-width': useElementSize(buttonElement, true).width,
+      '--button-width': useElementSize(visible, buttonElement, true).width,
     } as CSSProperties,
     ...transitionDataAttributes(transitionData),
   })

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

@@ -851,7 +851,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     style: {
       ...theirProps.style,
       ...style,
-      '--button-width': useElementSize(button, true).width,
+      '--button-width': useElementSize(visible, button, true).width,
     } as React.CSSProperties,
     ...transitionDataAttributes(transitionData),
   })

packages/@headlessui-react/src/hooks/use-element-size.ts

@@ -1,4 +1,5 @@
-import { useMemo, useReducer } from 'react'
+import { useState } from 'react'
+import { disposables } from '../utils/disposables'
 import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 
 function computeSize(element: HTMLElement | null) {
@@ -7,26 +8,36 @@ function computeSize(element: HTMLElement | null) {
   return { width, height }
 }
 
-export function useElementSize(element: HTMLElement | null, unit = false) {
-  let [identity, forceRerender] = useReducer(() => ({}), {})
-
-  // When the element changes during a re-render, we want to make sure we
-  // compute the correct size as soon as possible. However, once the element is
-  // stable, we also want to watch for changes to the element. The `identity`
-  // state can be used to recompute the size.
-  let size = useMemo(() => computeSize(element), [element, identity])
+export function useElementSize(enabled: boolean, element: HTMLElement | null, unit = false) {
+  let [size, setSize] = useState(() => computeSize(element))
 
   useIsoMorphicEffect(() => {
     if (!element) return
+    if (!enabled) return
+
+    let d = disposables()
+
+    // requestAnimationFrame loop to catch any visual changes such as a
+    // `transform: scale` which wouldn't trigger a ResizeObserver
+    d.requestAnimationFrame(function run() {
+      d.requestAnimationFrame(run)
+
+      setSize((current) => {
+        let newSize = computeSize(element)
+
+        if (newSize.width === current.width && newSize.height === current.height) {
+          // Return the old object to avoid re-renders
+          return current
+        }
 
-    // Trigger a re-render whenever the element resizes
-    let observer = new ResizeObserver(forceRerender)
-    observer.observe(element)
+        return newSize
+      })
+    })
 
     return () => {
-      observer.disconnect()
+      d.dispose()
     }
-  }, [element])
+  }, [element, enabled])
 
   if (unit) {
     return {