search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.18k stars 2.53k forks source link

Interactive drag handles don't work with disableInteractiveElementBlocking in firefox #1874

Open alexlapwood opened 4 years ago

alexlapwood commented 4 years ago

Expected behavior

Interactive elements within a draggable item should be able to be used as a drag handle when disableInteractiveElementBlocking is true.

Actual behavior

In Firefox using the keyboard to pick up a draggable via an interactive element picks it up and puts it straight back down.

Steps to reproduce

It's a little tricky, but I was able to reproduce this using this story: https://react-beautiful-dnd.netlify.app/?path=/story/nested-interative-elements--stress-test

  1. Click toggle to turn disableInteractiveElementBlocking on
  2. Keep pressing Shift+Tab until you are focussed on an interactive element (e.g. button)
  3. Press space to pick up the draggable and try to move it around

I'm seeing this work on Chrome, but not Firefox.

Suggested solution?

I don't know what's causing this on a technical level, but it would be fantastic if Firefox behaved the same as other browsers.

What version of React are you using?

16.8.0

What version of react-beautiful-dnd are you running?

13.0.0

What browser are you using?

Chrome and Firefox (latest versions)

Additional information

Probably related to https://github.com/atlassian/react-beautiful-dnd/issues/297

Solijons commented 2 years ago

Were you able to find a fix for this ? I am having same problem in firefox using material-ui. It drags/drops textarea or checkbox but does not work in input not sure why.