Fix grid resizer drag over embed #64098
Merged
Conversation
This file contains 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
stokesman
added
[Type] Bug
|
Size Change: -12 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
stokesman
commented
Jul 30, 2024
Comment on lines
+122
to
+130
| 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 ); | ||
| } } |
There was a problem hiding this comment.
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 } /> }
There was a problem hiding this comment.
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 } /> }There was a problem hiding this comment.
Thanks for the tip!
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
noisysocks
approved these changes
Jul 31, 2024
There was a problem hiding this comment.
This is great! TIL about setPointerCapture. Love that you've gotten rid of the once hack, too.
Tested that this fixes the bug and there's no regression of #61668.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
A bug fix for grid resizing.
Why?
To fix #63279 where dragging to resize grid items is impeded if the grid item is an object/embed/iframe.
How?
Uses
setPointerCaptureTesting Instructions
No flaky drag over embed with iframe
No regression of stuck dragging when releasing the drag with the pointer off of the drag handle
Testing Instructions for Keyboard
Screenshots or screencast
grid-resizer-drag-over-embed.mp4