Ensure sibling Dialog components are scrollable on mobile (#3796)

This PR fixes an issue where opening a sibling dialog doesn't allow you
to scroll the second (top most) dialog on iOS anymore.

The issue here is that on iOS we have to do a lot of annoying work to
make the dialog behave like a dialog and prevent scrolling _outside_ of
the dialog.

To make this all work, we PUSH and POP some information to know what the
top-most dialog is. The moment there is 1 open dialog, and as long as
there is 1 dialog we scroll lock the page, the moment there are 0
dialogs again we unlock the page again.

Each dialog also has a set of "allowed containers", these are just
container DOM nodes where we allow scrolling.

But the issue is that we were dealing with stale data. These are the
events you see when we open dialogs:

```
[Log] Open dialog #1
[Log] PUSH
[Log] SCROLL_PREVENT  → We start preventing scroll because there is 1 dialog
[Log] Open dialog #2
[Log] PUSH            → We opened a second dialog, but the `SCROLL_PREVENT`
                      → was already active and doesn't re-evaluate
[Log] POP             → POP from dialog #1 because not the top-most anymore
```

Any time we `PUSH` we also track new meta data with the allowed
containers. But
we were already preventing scroll, so we had stale meta data.

To solve this, I can think of 2 solutions:

1. The moment we POP, we also SCROLL_ALLOW again, but realize that we
still have 1 dialog open, so we SCROLL_PREVENT again. This just feels
wrong to me though.
2. Any time we PUSH / POP, we re-evaluate the meta data, and when
receive the meta data in the SCROLL_PREVENT event listeners, we call the
function to get the latest meta data not the old stale data.
   
## Test plan

In both scenario's I first open the dialog, then scroll.

**before:**


https://github.com/user-attachments/assets/e4747e14-c80e-4f64-8ea0-ec43b1d2283d

**after:**


https://github.com/user-attachments/assets/c5cf1d59-1186-4a9f-84c7-4a67339f2d01

Fixes: #3378

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improve focus management in shadow DOM roots ([#3794](https://github.com/tailwindlabs/headlessui/pull/3794))
 - Don't accidentally open the `Combobox` when touching the `ComboboxButton` while dragging on mobile ([#3795](https://github.com/tailwindlabs/headlessui/pull/3795))
+- Ensure sibling `Dialog` components are scrollable on mobile ([#3796](https://github.com/tailwindlabs/headlessui/pull/3796))
 
 ## [2.2.8] - 2025-09-12
 

packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts

@@ -15,9 +15,15 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
   return {
     before({ doc, d, meta }) {
       function inAllowedContainer(el: Element) {
-        return meta.containers
-          .flatMap((resolve) => resolve())
-          .some((container) => container.contains(el))
+        for (let resolve of meta().containers) {
+          for (let element of resolve()) {
+            if (element.contains(el)) {
+              return true
+            }
+          }
+        }
+
+        return false
       }
 
       d.microTask(() => {

packages/@headlessui-react/src/hooks/document-overflow/overflow-store.ts

@@ -9,6 +9,7 @@ interface DocEntry {
   count: number
   d: Disposables
   meta: Set<MetaFn>
+  computedMeta: Record<string, any>
 }
 
 function buildMeta(fns: Iterable<MetaFn>) {
@@ -24,7 +25,7 @@ export type MetaFn = (meta: Record<string, any>) => Record<string, any>
 export interface Context<MetaType extends Record<string, any> = any> {
   doc: Document
   d: Disposables
-  meta: MetaType
+  meta: () => MetaType
 }
 
 export interface ScrollLockStep<MetaType extends Record<string, any> = any> {
@@ -39,10 +40,12 @@ export let overflows = createStore(() => new Map<Document, DocEntry>(), {
       count: 0,
       d: disposables(),
       meta: new Set(),
+      computedMeta: {},
     }
 
     entry.count++
     entry.meta.add(meta)
+    entry.computedMeta = buildMeta(entry.meta)
     this.set(doc, entry)
 
     return this
@@ -53,16 +56,27 @@ export let overflows = createStore(() => new Map<Document, DocEntry>(), {
     if (entry) {
       entry.count--
       entry.meta.delete(meta)
+      entry.computedMeta = buildMeta(entry.meta)
     }
 
     return this
   },
 
-  SCROLL_PREVENT({ doc, d, meta }: DocEntry) {
+  SCROLL_PREVENT(entry: DocEntry) {
     let ctx = {
-      doc,
-      d,
-      meta: buildMeta(meta),
+      doc: entry.doc,
+      d: entry.d,
+
+      // The moment we `PUSH`, we also `SCROLL_PREVENT`. But a later `PUSH` will
+      // not re-trigger a `SCROLL_PREVENT` because we are already in a locked
+      // state.
+      //
+      // This `meta()` function is called lazily such that a `PUSH` or `POP`
+      // that happens later can update the meta information. Otherwise we would
+      // use stale meta information.
+      meta() {
+        return entry.computedMeta
+      },
     }
 
     let steps: ScrollLockStep<any>[] = [