React-beautiful-dnd: Keyboard not working using react-bootstrap Modal with React Portal

[Amelie52]

Bug or feature request?

Bug

Expected behavior

I can drag the draggable item with keyboard on modal and with the use of portal.

Actual behavior

I can use tab and space keyboard to select item, but when I want to move it with arrow, it doesn’t move.

Steps to reproduce

Create a dnd within a modal (and with portal), then attempt to drag the draggable item with keyboard

What version of React are you using?

16.4.1

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

7.3.1

What browser are you using?

Chrome, Firefox and Safari

Demo

Dnd on modal without portal

Dnd on modal with portal

[alexreardon]

Hi @Amelie52,

without an independent example, it is impossible for us to know what is going on.

Here is a boilerplate you can build on: https://codesandbox.io/s/k260nyxq9v

[Amelie52]

Hi @alexreardon,

No problem, I made two examples.

One without portal :
https://codesandbox.io/s/olk8m320lq

And one with portal :
https://codesandbox.io/s/3465m7xmw6

On the first example, you can drag an item with keys tab, space and arrows but, on the second example, you can't move with arrows.

[Chariyski]

Hi,

I have the same issue. Also the drag and drop on mobile (https://codesandbox.io/s/3465m7xmw6) is not working at all.

[Chariyski]

In my case I'm not using React modal, but have the same problem when I use react portal

PS: here is a demo whitout React Modal https://codesandbox.io/s/61qp96q7kk

[alexreardon]

regarding the modal, i am a thinking that it is caused by react-bootstrap.

Here is our portal example that works fine with keyboard: https://react-beautiful-dnd.netlify.com/?selectedKind=Portals&selectedStory=Using%20your%20own%20portal&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[alexreardon]

I can see what the issue is. react-overlays/Modal.js (which is what react-bootstrap uses) is stealing focus from the draggable when it moves into the portal:

https://github.com/react-bootstrap/react-overlays/blob/master/src/Modal.js#L516

try opting out of this behaviour using the enforceFocus prop.

Let me know how you go

[Amelie52]

enforceFocus={false} works, thanks a lot 👍