Don’t cancel touchmove on input elements inside a dialog (#3166)

* Don’t cancel touchmove on `input` elements inside a dialog * Update changelog * Update # Conflicts: # packages/@headlessui-react/CHANGELOG.md
tailwindlabs · May 3, 2024 · 47d4b4f · 47d4b4f
1 parent 7ebeaab
commit 47d4b4f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
 - Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779))
 
+### Fixed
+
+- Don’t cancel `touchmove` on `input` elements inside a dialog ([#3166](https://github.com/tailwindlabs/headlessui/pull/3166))
+
 ## [1.7.19] - 2024-04-15
 
 ### Fixed

diff --git a/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts
@@ -94,6 +94,12 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
           (e) => {
             // Check if we are scrolling inside any of the allowed containers, if not let's cancel the event!
             if (e.target instanceof HTMLElement) {
+              // Some inputs like `<input type=range>` use touch events to
+              // allow interaction. We should not prevent this event.
+              if (e.target.tagName === 'INPUT') {
+                return
+              }
+
               if (inAllowedContainer(e.target as HTMLElement)) {
                 // Even if we are in an allowed container, on iOS the main page can still scroll, we
                 // have to make sure that we `event.preventDefault()` this event to prevent that.

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don’t cancel `touchmove` on `input` elements inside a dialog ([#3166](https://github.com/tailwindlabs/headlessui/pull/3166))
 
 ## [1.7.21] - 2024-04-26
 

diff --git a/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts
@@ -94,6 +94,12 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
           (e) => {
             // Check if we are scrolling inside any of the allowed containers, if not let's cancel the event!
             if (e.target instanceof HTMLElement) {
+              // Some inputs like `<input type=range>` use touch events to
+              // allow interaction. We should not prevent this event.
+              if (e.target.tagName === 'INPUT') {
+                return
+              }
+
               if (inAllowedContainer(e.target as HTMLElement)) {
                 // Even if we are in an allowed container, on iOS the main page can still scroll, we
                 // have to make sure that we `event.preventDefault()` this event to prevent that.