Draggable is lifted on 'keydown' event while interactive element inside of Draggable is focused

[serhii-yakymuk]

Expected behavior

If 'Space' key is pressed on focusable element inside Draggable - Draggable is not lifted. Draggable is lifted via keyboard only when focus is specifically on it

Actual behavior

Draggable is lifted on when interacting via keyboard with ARIA checkbox inside Draggable

Steps to reproduce

1. Focus on checkbox inside Draggable using keyboard.
2. Press 'Space'.

Suggested solution?

I think there are two ways to resolve this issue:

1) Write a bit more complex code to detect interactive elements in isAnInteractiveElement function, including ARIA controls.

2) Lift Draggable with keyboard only if it is focused, not any of its descendants. This approach is better in my opinion, and should be expected by user. In keyboard sensor, we can check if event target has draggableId, not any of its parents.

What version of React are you using?

^16.13.1

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

^13.0.0

What browser are you using?

Chrome

Demo

https://codesandbox.io/s/vertical-list-109bi

[mancusi]

This also gave me some trouble and seems like unexpected behavior. If this behavior is expected then you can simply override the findClosestDraggableId function in the Sensor API with a custom sensor.

const useLocalKeyboardSensor = (api) => {
  const newApi = Object.assign({}, api)
  newApi.findClosestDraggableId = (event) => {
    if (!(event.target || event.target.dataset)) {
      return null;
    }

    return event.target.dataset["rbdDragHandleDraggableId"] || null;
  };

  useKeyboardSensor(newApi);
};