Conversation
#662 (#664) ## Description Relates to #662 This PR resolves an issue where dragging the resizable handle on touch devices (tablets and mobile phones) caused the panel to jump or snap to the edge of the container, making it impossible to resize panels accurately with touch interactions. ## Root Cause The issue was caused by the browser's default touch gesture handling. When a user attempted to drag the resize handle on a touch device, the browser would interpret the touch movement as a potential scroll or pan gesture and fire a `pointercancel` event, which interrupted the drag operation and caused erratic behavior. ## Solution Added `touch-action: none` CSS property to the `Separator` component. This CSS property instructs the browser to disable all default touch behaviors (scrolling, zooming, panning) on the resize handle element, allowing the pointer events to be handled exclusively by the resize logic. The `touch-action: none` property: - Prevents the browser from firing `pointercancel` events during drag operations - Ensures smooth and continuous pointer tracking during touch interactions - Does not affect mouse-based interactions - Is the standard approach for implementing custom drag interactions on touch devices ## Changes - Added `touchAction: "none"` to the `Separator` component's inline styles ## Testing Tested on: - ✅ Android devices (Chrome browser) - ✅ Chrome DevTools mobile emulation - ✅ Desktop browsers (Chrome, Firefox) - no regression -⚠️ iOS devices - not tested (would appreciate testing from reviewers) ### Before - Touch dragging caused panels to jump to extreme positions - Resize handle was unresponsive or erratic on touch devices - Drag operations would randomly stop mid-gesture ### After - Smooth, predictable touch dragging behavior - Resize handle follows finger movement accurately - Consistent behavior across touch and mouse interactions ## Breaking Changes None. This is a bug fix that only affects the CSS styling of the resize handle. ## Additional Notes This is a minimal, non-invasive fix that follows web standards for handling touch interactions in custom drag operations. The `touch-action` CSS property is widely supported across all modern browsers. If there are concerns about iOS compatibility, I'm happy to add additional testing or iterate on the solution. However, `touch-action: none` is the standard approach recommended by MDN and browser vendors for preventing default touch behaviors during custom pointer interactions. ``` ## Commit Message ``` fix: add touch-action: none to Separator for touch device support Fixes #662 On touch devices, the browser's default gesture handling would fire pointercancel events during drag operations, causing panels to jump to extreme positions. Adding touch-action: none prevents the browser from interpreting touch movements as gestures, allowing smooth touch dragging. Tested on Android devices and Chrome DevTools mobile emulation. ``` ## Files Changed ``` lib/components/separator/Separator.tsx
Resolves #662 Previously I had code that attempted to tell the browser that I would handle touch interactions. It worked by setting `touch-action: none` in response to a "pointerdown" event: https://github.com/bvaughn/react-resizable-panels/blob/8f5e5f39d23547c078cd84809a71751994876c5d/lib/global/cursor/updateCursorStyle.ts#L41 Apparently this isn't soon enough in some cases, and sometimes the _first_ touch interaction on mobile would jump. This commit expands the `touch-action` styles to apply to the `Group` and `Panel` elements (it's not an inherited style) as well the `Separator`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )