Fix touch actions on iOS after entering disallowed area (#3801)

This PR fixes an issue where if you have an open Dialog on iOS that once
you interacted with an area otuside of the dialog, you could no longer
scroll or zoom the dialog itself anymore until it closed and reopened.

The reason this was happening is that on `touchstart` we checked whether
we are in an allowed area or not.

- If we are in an allowed area, add `overscroll-behavior: contain` to
the scrollable area to prevent scrolling the body behind it.
- If we are not in an allowed area, add `touch-action: none` to the
element you were touching to prevent any other touch events from being
fired.

The problem with this is that we never reset the state until the dialog
is closed (and eventually unmounted).

So to solve the problem, every time we get a `touchstart` event, we
reset those CSS properties to their previous values, and then check
again whether we are in an allowed area or not.

Note: the `touchstart` event listener is set on the document itself, so
we still get the event even if `touch-action: none` was set on the
target element.

## Test plan

Made 2 videos with a before / after comparison. The reproduction used is
from #3234. The steps I'm applying here are:

1. Open the dialog by tapping on the toggle button
2. Scroll inside the dialog
3. Pinch to zoom inside the dialog
4. Tap outside / scroll outside the dialog to show that you can't with
the outside
5. Scroll inside the dialog again
6. Pinch to zoom inside the dialog again

**Before:**

1. ✅ Open the dialog by tapping on the toggle button
2. ✅ Scroll inside the dialog
3. ✅ Pinch to zoom inside the dialog
4. ✅ Tap outside / scroll outside the dialog to show that you can't with
the outside
5. ❌ Scroll inside the dialog again
6. ❌ Pinch to zoom inside the dialog again



https://github.com/user-attachments/assets/d79d9794-3732-4201-a4c9-43ea36d302ce

**After:**

1. ✅ Open the dialog by tapping on the toggle button
2. ✅ Scroll inside the dialog
3. ✅ Pinch to zoom inside the dialog
4. ✅ Tap outside / scroll outside the dialog to show that you can't with
the outside
5. ✅ Scroll inside the dialog again
6. ✅ Pinch to zoom inside the dialog again


https://github.com/user-attachments/assets/f6c1c765-3c8c-4d3c-91c2-1b43507f6434


Fixes: #3234 
Closes: #3602

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
 - Ensure sibling `Dialog` components are scrollable on mobile ([#3796](https://github.com/tailwindlabs/headlessui/pull/3796))
 - Infer `Combobox` type based on `onChange` handler ([#3798](https://github.com/tailwindlabs/headlessui/pull/3798))
 - Allow home/end key default behavior inside `ComboboxInput` when `Combobox` is closed ([#3798](https://github.com/tailwindlabs/headlessui/pull/3798))
+- Ensure interacting with a `Dialog` on iOS works after interacting with a disallowed area ([#3801](https://github.com/tailwindlabs/headlessui/pull/3801))
 
 ## [2.2.8] - 2025-09-12
 

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

@@ -76,23 +76,27 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
         )
 
         // Rely on overscrollBehavior to prevent scrolling outside of the Dialog.
-        d.addEventListener(doc, 'touchstart', (e) => {
-          if (DOM.isHTMLorSVGElement(e.target) && DOM.hasInlineStyle(e.target)) {
-            if (inAllowedContainer(e.target)) {
-              // Find the root of the allowed containers
-              let rootContainer = e.target
-              while (
-                rootContainer.parentElement &&
-                inAllowedContainer(rootContainer.parentElement)
-              ) {
-                rootContainer = rootContainer.parentElement!
-              }
+        d.group((_d) => {
+          d.addEventListener(doc, 'touchstart', (e) => {
+            _d.dispose()
+
+            if (DOM.isHTMLorSVGElement(e.target) && DOM.hasInlineStyle(e.target)) {
+              if (inAllowedContainer(e.target)) {
+                // Find the root of the allowed containers
+                let rootContainer = e.target
+                while (
+                  rootContainer.parentElement &&
+                  inAllowedContainer(rootContainer.parentElement)
+                ) {
+                  rootContainer = rootContainer.parentElement!
+                }
 
-              d.style(rootContainer, 'overscrollBehavior', 'contain')
-            } else {
-              d.style(e.target, 'touchAction', 'none')
+                _d.style(rootContainer, 'overscrollBehavior', 'contain')
+              } else {
+                _d.style(e.target, 'touchAction', 'none')
+              }
             }
-          }
+          })
         })
 
         d.addEventListener(