From d416c1ca5902021d7a00f0c64caa0f037554eb49 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 3 May 2024 10:35:50 -0400 Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20cancel=20`touchmove`=20on=20`in?= =?UTF-8?q?put`=20elements=20inside=20a=20dialog=20(#3166)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Don’t cancel touchmove on `input` elements inside a dialog * Update changelog * Update --- packages/@headlessui-react/CHANGELOG.md | 1 + .../src/hooks/document-overflow/handle-ios-locking.ts | 6 ++++++ .../src/hooks/document-overflow/handle-ios-locking.ts | 6 ++++++ 3 files changed, 13 insertions(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 8e8f683..b396461 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix enter transitions in `Transition` component ([#3074](https://github.com/tailwindlabs/headlessui/pull/3074)) - Fix focus handling in `ListboxOptions` and `MenuItems` components ([#3112](https://github.com/tailwindlabs/headlessui/pull/3112)) - Fix horizontal scrolling inside the `Dialog` component ([#2889](https://github.com/tailwindlabs/headlessui/pull/2889)) +- Don’t cancel `touchmove` on `input` elements inside a dialog ([#3166](https://github.com/tailwindlabs/headlessui/pull/3166)) ### Changed 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 index c8228e3..3a70893 100644 --- 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 { (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 `` 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/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts index a19966a..de139c1 100644 --- 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 { (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 `` 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.