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

Drag and drop broken in Safari #22730

Closed
jasmussen opened this issue May 29, 2020 · 9 comments · Fixed by #22960
Closed

Drag and drop broken in Safari #22730

jasmussen opened this issue May 29, 2020 · 9 comments · Fixed by #22960
Assignees
Labels
[Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release

Comments

@jasmussen
Copy link
Contributor

While working on #22673, I noted that drag and drop did not work in Safari.

Steps to reproduce:

  • Use Safari
  • Insert more than one block
  • Hover the block switcher to revealthe mover
  • Drag and drop the block

Observe that it doesn't work.

There's no error in the console.

@jasmussen jasmussen added [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release labels May 29, 2020
@jasmussen
Copy link
Contributor Author

CC: @WordPress/gutenberg-core

@jasmussen
Copy link
Contributor Author

While you're here, I noticed this CSS: https://github.com/WordPress/gutenberg/blob/master/packages/components/src/draggable/style.scss#L1

body.is-dragging-components-draggable {
	cursor: move;/* Fallback for IE/Edge < 14 */
	cursor: grabbing !important;
}

The intent seems to be to show the "grabbing" cursor while you are performing a drag operation. But this doesn't work, and it seems like it's not possible to change the cursor during a drag operation without JavaScript. This SO post suggests to use dropEffect, which appears to work in this fiddle.

@diegohaz
Copy link
Member

diegohaz commented Jun 5, 2020

I've done some investigation and it seems that this is a regression introduced by the Reakit Toolbar. Working on it.

@ellatrix
Copy link
Member

@diegohaz I don't see this fixed in Gutenberg. It seems it's only been fixed upstream?

@ellatrix
Copy link
Member

Oh, I see the PR now. But for me, drag and drop is still broken in Safari.

@ellatrix
Copy link
Member

ellatrix commented Jun 10, 2020

drag-safari

Maybe related to the new movers? Cc @jasmussen

@jasmussen
Copy link
Contributor Author

I had to do an npm install and build to get it working. Worked for me with the new movers.

@diegohaz
Copy link
Member

@ellatrix I think it's what @jasmussen said. It works for me locally and on https://wordpress.github.io/gutenberg/?path=/story/playground-block-editor--default

@ellatrix
Copy link
Member

Duh, stupid of me :) Sorry for the false alarm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants