Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix grid resizer drag over embed #64098

Merged
merged 2 commits into from
Jul 31, 2024
Merged

Fix grid resizer drag over embed #64098

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95b6d38
Capture pointer to avoid flaky dragging
stokesman Jul 30, 2024
a3b57e9
Remove manual mouseup dispatch
stokesman Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 9 additions & 15 deletions packages/block-editor/src/components/grid/grid-item-resizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,28 +119,22 @@ function GridItemResizerInner( {
} }
bounds={ bounds }
boundsByDirection
onPointerDown={ ( { target, pointerId } ) => {
/*
* Captures the pointer to avoid hiccups while dragging over objects
* like iframes and ensures that the event to end the drag is
* captured by the target (resize handle) whether or not it’s under
* the pointer.
*/
target.setPointerCapture( pointerId );
} }
Comment on lines +122 to +130
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it’d nice to put this in ResizableBox as it should be okay for any use case.

I gave it a quick try but typing it perfectly is an exercise I didn’t complete (had to use `@ts-ignore`). 
diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 1b05270ea0..96c3044b7b 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
-import type { ReactNode, ForwardedRef } from 'react';
+import type { ReactNode, ForwardedRef, PointerEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -92,6 +92,7 @@ type ResizableBoxProps = ResizableProps & {
 	showHandle?: boolean;
 	__experimentalShowTooltip?: boolean;
 	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
+	onPointerDown: PointerEventHandler;
 };
 
 function UnforwardedResizableBox(
@@ -116,6 +117,17 @@ function UnforwardedResizableBox(
 			handleStyles={ HANDLE_STYLES }
 			ref={ ref }
 			{ ...props }
+			// @ts-ignore -- Ignore that ResizableProps does not include `onPointerDown`
+			onPointerDown={ ( event ) => {
+				/*
+				 * Captures the pointer to avoid hiccups while dragging over objects
+				 * like iframes and ensures that the event to end the drag is
+				 * captured by the target (resize handle) whether or not it’s under
+				 * the pointer.
+				 */
+				event.target.setPointerCapture( event.pointerId );
+				props.onPointerDown( event );
+			} }
 		>
 			{ children }
 			{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally this would be fixed in re-resizable but you could do something like this as a workaround:

diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 1b05270ea0b..28d3a7cea74 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
-import type { ReactNode, ForwardedRef } from 'react';
+import type { ReactNode, ForwardedRef, PointerEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -87,11 +87,19 @@ const HANDLE_STYLES = {
 	bottomLeft: HANDLE_STYLES_OVERRIDES,
 };
 
+declare module 're-resizable' {
+	// eslint-disable-next-line @typescript-eslint/no-shadow
+	interface ResizableProps {
+		onPointerDown: PointerEventHandler;
+	}
+}
+
 type ResizableBoxProps = ResizableProps & {
 	children: ReactNode;
 	showHandle?: boolean;
 	__experimentalShowTooltip?: boolean;
 	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
+	onPointerDown: PointerEventHandler;
 };
 
 function UnforwardedResizableBox(
@@ -116,6 +124,11 @@ function UnforwardedResizableBox(
 			handleStyles={ HANDLE_STYLES }
 			ref={ ref }
 			{ ...props }
+			onPointerDown={ ( event ) => {
+				const target = event.target as Element;
+				target.setPointerCapture( event.pointerId );
+				props.onPointerDown( event );
+			} }
 		>
 			{ children }
 			{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the tip!

onResizeStart={ ( event, direction ) => {
/*
* The container justification and alignment need to be set
* according to the direction the resizer is being dragged in,
* so that it resizes in the right direction.
*/
setResizeDirection( direction );

/*
* The mouseup event on the resize handle doesn't trigger if the mouse
* isn't directly above the handle, so we try to detect if it happens
* outside the grid and dispatch a mouseup event on the handle.
*/
blockElement.ownerDocument.addEventListener(
'mouseup',
() => {
event.target.dispatchEvent(
new Event( 'mouseup', { bubbles: true } )
);
},
{ once: true }
);
} }
onResizeStop={ ( event, direction, boxElement ) => {
const columnGap = parseFloat(
Expand Down
Loading