Browser focus

"You got to focus on what's real, man" - Jake from Adventure time

react-beautiful-dnd includes logic to maintain browser focus for drag handles. This especially important for keyboard dragging which requires the dragging item to be focused.

Terminology reminder 📖

A <Draggable /> has a drag handle. A drag handle is the part of the <Draggable /> that controls the dragging of the whole <Draggable />. A drag handle can be the same element as the <Draggable />

Drag handle not focused at drag start

If the drag handle is not focused when a drag starts then focus is not given to the dragging item. This is a mirror of the native HTML5 drag and drop behaviour which does not give focus to an item just because it is dragging. You are welcome to call HTMLElement.focus() when a drag starts to give it focus, but that is up to you.

Drag handle is focused at drag start

If a drag handle has browser focus when a drag starts then rbd will try to give focus to the drag handle during a drag and just after a drag ends.

Here is what is done:

• Give focus to a drag handle with a matching DraggableId after the drag starts. This might be a different element to the original drag handle if you are reparenting your <Draggable />.
• Give focus to a drag handle with a matching DraggableId after the drag ends. Sometimes the original drag handle element is lost during a drag, such as when reparenting your <Draggable />, or when moving a <Draggable /> from one list to another as React will recreate the element.
• If combining then focus is given to the combine target after a drag ends. This allows keyboard users to continue to engage with the application without needing to get the focus back to where they where the last interaction was

Browser testing

Fun fact: we test this behaviour using cypress.io to ensure that focus management behaves as we expect

← Back to documentation