github atlassian/react-beautiful-dnd v7.1.0

latest releases: v13.1.1, v13.1.0, v13.0.0...
6 years ago


Automatic focus retention for cross list movement 🎩✨ #449

We now are smart about giving focus to a mounting draggable if it had focus while dragging
If you had any custom post drag focus logic you can now remove it

When you move component from one list to another in react, the default behaviour is for the component to loose focus. This is because the old DOM element is being destroyed and a new one is being created. Previously we recommended that you bolt on your own auto focus management to ensure that when moving to a new list that focus is maintained.

Given that this behaviour is so intuitive and important for keyboard dragging we have baked it right into the library.

We will now automatically focus on a drag handle if:

  • It was unmounted at the end of a drag
  • It had focus
  • It is enabled when mounted
  • No other elements have gained browser focus

We have sweated the details to make sure we are only focusing on what we should be.

Old behaviour

Without adding on your own post drag focus management this is what it was like


New behaviour 🤩

Without any custom post drag focus management


Thanks @petegleeson and @Blasz for helping me brainstorm and review this one


  • We already where attempting to give focus to a draggable if it moves into a React.Portal while dragging #406. However, this focus logic would not have worked if the Draggable and drag handle where not the same element. This has been fixed as a part of #449

Don't miss a new react-beautiful-dnd release

NewReleases is sending notifications on new releases.