sticky row width calc sharing

Author: kianbazza

packages/react/src/dropdown-menu/root/root.test.tsx

@@ -717,6 +717,52 @@ function DropdownMenuWithNestedSubpages() {
   )
 }
 
+function DropdownMenuWithMeasuredNestedSubpages() {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger data-testid="trigger">
+        Open Menu
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Positioner>
+          <DropdownMenu.Popup>
+            <DropdownMenu.Surface data-testid="root-surface">
+              <DropdownMenu.List data-testid="root-list">
+                <DropdownMenu.SubpageTrigger
+                  data-testid="subpage-trigger-1"
+                  targetPageId="page-1"
+                  data-measure-width="420"
+                >
+                  Root Wide Item
+                </DropdownMenu.SubpageTrigger>
+              </DropdownMenu.List>
+            </DropdownMenu.Surface>
+
+            <DropdownMenu.Subpage pageId="page-1">
+              <DropdownMenu.Surface data-testid="subpage-surface-1">
+                <DropdownMenu.List data-testid="subpage-list-1">
+                  <DropdownMenu.SubpageBackItem
+                    data-testid="subpage-back-item-1"
+                    data-measure-width="180"
+                  >
+                    Back
+                  </DropdownMenu.SubpageBackItem>
+                  <DropdownMenu.Item
+                    data-testid="subpage-item-1"
+                    data-measure-width="200"
+                  >
+                    Narrow Item
+                  </DropdownMenu.Item>
+                </DropdownMenu.List>
+              </DropdownMenu.Surface>
+            </DropdownMenu.Subpage>
+          </DropdownMenu.Popup>
+        </DropdownMenu.Positioner>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}
+
 function DropdownMenuWithAsyncSubpageBackItem({
   onSelectAsync,
 }: {
@@ -2396,6 +2442,69 @@ describe('<DropdownMenu.Root />', () => {
       })
     })
 
+    it('keeps sticky row width between subpage navigations in the same popup', async () => {
+      const user = userEvent.setup()
+
+      const getMockWidth = (element: HTMLElement) => {
+        const rawWidth = element.getAttribute('data-measure-width')
+        if (!rawWidth) {
+          return 0
+        }
+
+        const parsedWidth = Number.parseFloat(rawWidth)
+        return Number.isFinite(parsedWidth) ? parsedWidth : 0
+      }
+
+      const requestAnimationFrameSpy = vi
+        .spyOn(window, 'requestAnimationFrame')
+        .mockImplementation((callback: FrameRequestCallback) => {
+          callback(0)
+          return 1
+        })
+      const cancelAnimationFrameSpy = vi
+        .spyOn(window, 'cancelAnimationFrame')
+        .mockImplementation(() => {})
+      const scrollWidthSpy = vi
+        .spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
+        .mockImplementation(function (this: HTMLElement) {
+          return getMockWidth(this)
+        })
+      const offsetWidthSpy = vi
+        .spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
+        .mockImplementation(function (this: HTMLElement) {
+          return getMockWidth(this)
+        })
+
+      try {
+        render(<DropdownMenuWithMeasuredNestedSubpages />)
+
+        await user.click(screen.getByTestId('trigger'))
+
+        await waitFor(() => {
+          expect(screen.getByTestId('root-surface')).toBeInTheDocument()
+        })
+
+        const popup = screen.getByRole('dialog')
+
+        await waitFor(() => {
+          expect(popup.style.getPropertyValue('--row-width')).toBe('421px')
+        })
+
+        await user.click(screen.getByTestId('subpage-trigger-1'))
+
+        await waitFor(() => {
+          expect(screen.getByTestId('subpage-surface-1')).toBeInTheDocument()
+        })
+
+        expect(popup.style.getPropertyValue('--row-width')).toBe('421px')
+      } finally {
+        requestAnimationFrameSpy.mockRestore()
+        cancelAnimationFrameSpy.mockRestore()
+        scrollWidthSpy.mockRestore()
+        offsetWidthSpy.mockRestore()
+      }
+    })
+
     it('goes back one page with ArrowLeft', async () => {
       const user = userEvent.setup()
       render(<DropdownMenuWithNestedSubpages />)

packages/react/src/internal/listbox/hooks/use-sticky-row-width.ts

@@ -19,6 +19,11 @@ function px(n: number) {
   return `${Math.ceil(n)}px`
 }
 
+function parseCssPixelValue(value: string): number | null {
+  const parsed = Number.parseFloat(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
 interface MeasurementEntry {
   element: HTMLElement
   id: string
@@ -71,7 +76,7 @@ export interface UseStickyRowWidthReturn {
  * The hook:
  * 1. Measures each row's natural width (using `max-content`)
  * 2. Tracks the maximum width seen across all rows
- * 3. Applies `--row-width` CSS variable to the list element
+ * 3. Applies `--row-width` CSS variable to the target element
  * 4. Only grows the width, never shrinks (until reset)
  *
  * @example
@@ -109,6 +114,28 @@ export function useStickyRowWidth(
   // Track the maximum width seen so far
   const maxSeenRef = React.useRef(0)
 
+  // Hydrate max width from an existing popup-level CSS variable.
+  // This keeps row width sticky when List remounts during subpage navigation.
+  React.useLayoutEffect(() => {
+    if (!enabled) return
+
+    const el = getTargetElement()
+    if (!el) return
+
+    const existingWidth = parseCssPixelValue(
+      el.style.getPropertyValue('--row-width').trim(),
+    )
+
+    if (!existingWidth || existingWidth <= maxSeenRef.current) {
+      return
+    }
+
+    maxSeenRef.current = existingWidth
+    debugLog('Hydrated max width from existing --row-width:', {
+      hydratedWidth: existingWidth,
+    })
+  }, [enabled, getTargetElement])
+
   // RAF scheduler state
   const readQueue = React.useRef<MeasurementEntry[]>([])
   const writeQueue = React.useRef<Array<() => void>>([])