diff --git a/CHANGELOG.md b/CHANGELOG.md index e4b303494..5b5b5551d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 4.6.4 + +- [664](https://github.com/bvaughn/react-resizable-panels/pull/664), [665](https://github.com/bvaughn/react-resizable-panels/pull/665): Resize actions sometimes "jump" on touch devices + ## 4.6.3 - Fixed a problem with project logo not displaying correctly in the README for the Firefox browser. diff --git a/lib/components/group/Group.tsx b/lib/components/group/Group.tsx index b5d67c39d..35ef37f30 100644 --- a/lib/components/group/Group.tsx +++ b/lib/components/group/Group.tsx @@ -356,10 +356,18 @@ export function Group({ height: "100%", width: "100%", overflow: "hidden", + ...style, + display: "flex", flexDirection: orientation === "horizontal" ? "row" : "column", - flexWrap: "nowrap" + flexWrap: "nowrap", + + // Inform the browser that the library is handling touch events for this element + // but still allow users to scroll content within panels in the non-resizing direction + // NOTE This is not an inherited style + // See github.com/bvaughn/react-resizable-panels/issues/662 + touchAction: orientation === "horizontal" ? "pan-y" : "pan-x" }} > {children} diff --git a/lib/components/panel/Panel.tsx b/lib/components/panel/Panel.tsx index 1b68d20f7..01b840808 100644 --- a/lib/components/panel/Panel.tsx +++ b/lib/components/panel/Panel.tsx @@ -72,6 +72,7 @@ export function Panel({ const { getPanelStyles, id: groupId, + orientation, registerPanel, togglePanelDisabled } = useGroupContext(); @@ -176,7 +177,13 @@ export function Panel({ maxWidth: "100%", flexGrow: 1, - ...style + ...style, + + // Inform the browser that the library is handling touch events for this element + // but still allow users to scroll content within panels in the non-resizing direction + // NOTE This is not an inherited style + // See github.com/bvaughn/react-resizable-panels/issues/662 + touchAction: orientation === "horizontal" ? "pan-y" : "pan-x" }} > {children} diff --git a/lib/components/separator/Separator.tsx b/lib/components/separator/Separator.tsx index 6208555e6..07c3c681c 100644 --- a/lib/components/separator/Separator.tsx +++ b/lib/components/separator/Separator.tsx @@ -160,9 +160,15 @@ export function Separator({ style={{ flexBasis: "auto", cursor, + ...style, + flexGrow: 0, - flexShrink: 0 + flexShrink: 0, + + // Inform the browser that the library is handling touch events for this element + // See github.com/bvaughn/react-resizable-panels/issues/662 + touchAction: "none" }} tabIndex={disabled ? undefined : 0} /> diff --git a/lib/global/cursor/updateCursorStyle.ts b/lib/global/cursor/updateCursorStyle.ts index 0c9671b13..bf9fb9f1e 100644 --- a/lib/global/cursor/updateCursorStyle.ts +++ b/lib/global/cursor/updateCursorStyle.ts @@ -38,7 +38,7 @@ export function updateCursorStyle(ownerDocument: Document) { state: interactionState.state }); - const nextStyle = `*, *:hover {cursor: ${cursorStyle} !important; ${interactionState.state === "active" ? "touch-action: none;" : ""} }`; + const nextStyle = `*, *:hover {cursor: ${cursorStyle} !important; }`; if (prevStyle === nextStyle) { return; } diff --git a/package.json b/package.json index ca497735d..13eb26c9d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-resizable-panels", - "version": "4.6.3", + "version": "4.6.4", "type": "module", "author": "Brian Vaughn (https://github.com/bvaughn/)", "contributors": [