allow horizontal scrolling when scroll locking (#2889)

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Allow horizontal scrolling when scroll locking ([bdf4f8e](https://github.com/tailwindlabs/headlessui/commit/bdf4f8e32358485dd9c437c0d631309250ee5624))
 
 ## [2.0.0-alpha.1] - 2023-12-20
 

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

@@ -97,7 +97,6 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
               if (inAllowedContainer(e.target as HTMLElement)) {
                 // We are in an allowed container, however on iOS the page can still scroll in
                 // certain scenarios...
-
                 let rootContainer = e.target
                 while (
                   rootContainer.parentElement &&
@@ -113,20 +112,32 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
                   // portal, its over.
                   scrollableParent.dataset.headlessuiPortal !== ''
                 ) {
-                  if (scrollableParent.scrollHeight > scrollableParent.clientHeight) {
+                  // Verify that we are in a scrollable container (which may or may not overflow yet)
+                  let css = window.getComputedStyle(scrollableParent)
+                  if (/(auto|scroll)/.test(css.overflow + css.overflowY + css.overflowX)) {
+                    break
+                  }
+
+                  // Check if the scrollable container is already overflowing
+                  if (
+                    scrollableParent.scrollHeight > scrollableParent.clientHeight ||
+                    scrollableParent.scrollWidth > scrollableParent.clientWidth
+                  ) {
                     break
                   }
 
                   scrollableParent = scrollableParent.parentElement
                 }
 
-                // We crawled up the tree until the beginnging of the Portal, let's prevent the event.
+                // We crawled up the tree until the beginnging of the Portal, let's prevent the
+                // event if this is the case. If not, then we are in a container where we are
+                // allowed to scroll so we don't have to prevent the event.
                 if (scrollableParent.dataset.headlessuiPortal === '') {
                   e.preventDefault()
                 }
               }
 
-              // We are not in an allowed contains, so let's prevent the event.
+              // We are not in an allowed container, so let's prevent the event.
               else {
                 e.preventDefault()
               }