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.

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

Iframe / block drag chip: Fix positioning when dragging over an iframe #55150

Merged
merged 1 commit into from
Oct 9, 2023
Merged
Changes from all commits
Commits
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
9 changes: 8 additions & 1 deletion packages/block-editor/src/components/iframe/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,14 @@ function bubbleEvent( event, Constructor, frame ) {
init[ key ] = event[ key ];
}

if ( event instanceof frame.ownerDocument.defaultView.MouseEvent ) {
// Check if the event is a MouseEvent generated within the iframe.
// If so, adjust the coordinates to be relative to the position of
// the iframe. This ensures that components such as Draggable
// receive coordinates relative to the window, instead of relative
// to the iframe. Without this, the Draggable event handler would
// result in components "jumping" position as soon as the user
// drags over the iframe.
if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we have a way to validate this behavior with an e2e test or something?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good question! I wonder how far we could get with React Testing Library and mounting an Iframe and firing an event, rather than a full e2e test? I'll add it to my list, but will focus on a couple of other bug fixes for 6.4 in the immediate term. For now, I think the addition of the comment here should help us in the interim, so we know what to look for if we encounter a similar issue again.

const rect = frame.getBoundingClientRect();
init.clientX += rect.left;
init.clientY += rect.top;
Expand Down
Loading