Maintain focus when moving between lists

README.md

@@ -692,15 +692,6 @@ Here are a few poor user experiences that can occur if you change things *during
 - If you remove the node that the user is dragging, then the drag will instantly end
 - If you change the dimension of the dragging node, then other things will not move out of the way at the correct time.
 
-#### Force focus after a transition between lists
-
-When an item is moved from one list to a different list, it loses browser focus if it had it. This is because `React` creates a new node in this situation. It will not lose focus if transitioned within the same list. The dragging item will always have had browser focus if it is dragging with a keyboard. It is highly recommended that you give the item (which is now in a different list) focus again. You can see an example of how to do this in our stories. Here is an example of how you could do it:
-
-- `onDragEnd`: move the item into the new list and record the id of the item that has moved
-- When rendering the reordered list, pass down a prop which will tell the newly moved item to obtain focus
-- In the `componentDidMount` lifecycle call back check if the item needs to gain focus based on its props (such as an `autoFocus` prop)
-- If focus is required - call `.focus` on the node. You can obtain the node by using `ReactDOM.findDOMNode` or monkey patching the `provided.innerRef` callback.
-
 ### `onDragStart` and `onDragEnd` pairing
 
 We try very hard to ensure that each `onDragStart` event is paired with a single `onDragEnd` event. However, there maybe a rogue situation where this is not the case. If that occurs - it is a bug. Currently there is no mechanism to tell the library to cancel a current drag externally.
@@ -1027,6 +1018,10 @@ It is a contract of this library that it owns the positioning logic of the dragg
 
 To get around this you can use [`React.Portal`](https://reactjs.org/docs/portals.html). We do not enable this functionality by default as it has performance problems. We have a [using a portal guide](/guides/using-a-portal.md) explaining the performance problem in more detail and how you can set up your own `React.Portal` if you want to.
 
+##### Focus retention when moving between lists
+
+When moving a `Draggable` from one list to another the default browser behaviour is for the *drag handle* element to loose focus. This is because the old element is being destroyed and a new one is being created. The loss of focus is not good when dragging with a keyboard as the user is then unable to continue to interact with the element. To improve this user experience we give a *drag handle* focus as it mounts if it had browser focus when it unmounted and nothing else has obtained browser focus.
+
 ##### Extending `DraggableProps.style`
 
 If you are using inline styles you are welcome to extend the `DraggableProps.style` object. You are also welcome to apply the `DraggableProps.style` object using inline styles and use your own styling solution for the component itself - such as [styled-components](https://github.com/styled-components/styled-components).

src/view/data-attributes.js

@@ -0,0 +1,5 @@
+// @flow
+export const prefix: string = 'data-react-beautiful-dnd';
+export const dragHandle: string = `${prefix}-drag-handle`;
+export const draggable: string = `${prefix}-draggable`;
+export const droppable: string = `${prefix}-droppable`;

src/view/draggable/draggable.jsx

@@ -6,6 +6,7 @@ import memoizeOne from 'memoize-one';
 import invariant from 'tiny-invariant';
 import type {
   Position,
+  DraggableId,
   DraggableDimension,
   InitialDragPositions,
   DroppableId,
@@ -14,6 +15,7 @@ import type {
 import DraggableDimensionPublisher from '../draggable-dimension-publisher/';
 import Moveable from '../moveable/';
 import DragHandle from '../drag-handle';
+import focusOnDragHandle from './focus-on-drag-handle';
 import getViewport from '../window/get-viewport';
 // eslint-disable-next-line no-duplicate-imports
 import type {
@@ -40,11 +42,19 @@ export const zIndexOptions: ZIndexOptions = {
   dropAnimating: 4500,
 };
 
+// When moving an item from one list to another
+// the component is:
+// - unmounted from the old list
+// - remounted in the new list
+// We help consumers by preserving focus when moving a
+// draggable from one list to another
+let lastFocused: ?DraggableId;
+
 export default class Draggable extends Component<Props> {
   /* eslint-disable react/sort-comp */
   callbacks: DragHandleCallbacks
   styleContext: string
-  isFocused: boolean = false
+  isDragHandleFocused: boolean = false
   ref: ?HTMLElement = null
 
   // Need to declare contextTypes without flow
@@ -58,8 +68,8 @@ export default class Draggable extends Component<Props> {
     super(props, context);
 
     const callbacks: DragHandleCallbacks = {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
+      onFocus: this.onDragHandleFocus,
+      onBlur: this.onDragHandleBlur,
       onLift: this.onLift,
       onMove: this.onMove,
       onDrop: this.onDrop,
@@ -75,6 +85,24 @@ export default class Draggable extends Component<Props> {
     this.styleContext = context[styleContextKey];
   }
 
+  componentDidMount() {
+    if (!this.ref) {
+      console.error(`
+        Draggable has not been provided with a ref.
+        Please use the DraggableProvided > innerRef function
+      `);
+      return;
+    }
+
+    // This draggable was not previously focused
+    if (this.props.draggableId !== lastFocused) {
+      return;
+    }
+
+    // This drag handle was previously focused - give it focus!
+    focusOnDragHandle(this.ref);
+  }
+
   componentWillUnmount() {
     // releasing reference to ref for cleanup
     this.ref = null;
@@ -117,12 +145,16 @@ export default class Draggable extends Component<Props> {
     lift(draggableId, initial, getViewport(), autoScrollMode);
   }
 
-  onFocus = () => {
-    this.isFocused = true;
+  onDragHandleFocus = () => {
+    this.isDragHandleFocused = true;
+    // Record that this was the last focused draggable
+    lastFocused = this.props.draggableId;
   }
 
-  onBlur = () => {
-    this.isFocused = false;
+  onDragHandleBlur = () => {
+    this.isDragHandleFocused = false;
+    // On blur we can clear our last focused
+    lastFocused = null;
   }
 
   onMove = (client: Position) => {
@@ -192,8 +224,8 @@ export default class Draggable extends Component<Props> {
     // After a ref change we might need to manually force focus onto the ref.
     // When moving something into or out of a portal the element looses focus
     // https://github.com/facebook/react/issues/12454
-    if (this.ref && this.isFocused) {
-      this.ref.focus();
+    if (this.ref && this.isDragHandleFocused) {
+      focusOnDragHandle(this.ref);
     }
   })
 

src/view/draggable/focus-on-drag-handle.js

@@ -0,0 +1,28 @@
+// @flow
+import { dragHandle } from '../data-attributes';
+
+const selector: string = `[${dragHandle}]`;
+
+const getDragHandleRef = (draggableRef: HTMLElement): ?HTMLElement => {
+  if (draggableRef.hasAttribute(dragHandle)) {
+    return draggableRef;
+  }
+
+  // find the first nested drag handle
+  // querySelector will return the first match on a breadth first search which is what we want
+  // https://codepen.io/alexreardon/pen/erOqyZ
+  const el: ?HTMLElement = draggableRef.querySelector(selector);
+
+  return el || null;
+};
+
+const focusOnDragHandle = (draggableRef: HTMLElement) => {
+  const dragHandleRef: ?HTMLElement = getDragHandleRef(draggableRef);
+  if (!dragHandleRef) {
+    console.error('Draggable cannot focus on the drag handle as it cannot be found');
+    return;
+  }
+  dragHandleRef.focus();
+};
+
+export default focusOnDragHandle;

src/view/droppable/droppable.jsx

@@ -43,6 +43,15 @@ export default class Droppable extends Component<Props> {
     return value;
   }
 
+  componentDidMount() {
+    if (!this.ref) {
+      console.error(`
+        Droppable has not been provided with a ref.
+        Please use the DroppableProvided > innerRef function
+      `);
+    }
+  }
+
   /* eslint-enable */
 
   // React calls ref callback twice for every render

src/view/style-marshal/get-styles.js

@@ -1,5 +1,6 @@
 // @flow
 import { css } from '../animation';
+import * as attributes from '../data-attributes';
 
 export type Styles = {|
   dragging: string,
@@ -8,12 +9,10 @@ export type Styles = {|
   userCancel: string,
 |}
 
-const prefix: string = 'data-react-beautiful-dnd';
-
 export default (styleContext: string): Styles => {
-  const dragHandleSelector: string = `[${prefix}-drag-handle="${styleContext}"]`;
-  const draggableSelector: string = `[${prefix}-draggable="${styleContext}"]`;
-  const droppableSelector: string = `[${prefix}-droppable="${styleContext}"]`;
+  const dragHandleSelector: string = `[${attributes.dragHandle}="${styleContext}"]`;
+  const draggableSelector: string = `[${attributes.draggable}="${styleContext}"]`;
+  const droppableSelector: string = `[${attributes.droppable}="${styleContext}"]`;
 
   // ## Drag handle styles
 

src/view/style-marshal/style-marshal.js

@@ -2,6 +2,7 @@
 import memoizeOne from 'memoize-one';
 import invariant from 'tiny-invariant';
 import getStyles, { type Styles } from './get-styles';
+import { prefix } from '../data-attributes';
 import type { StyleMarshal } from './style-marshal-types';
 import type {
   State as AppState,
@@ -15,8 +16,6 @@ type State = {|
   el: ?HTMLStyleElement,
 |}
 
-const prefix: string = 'data-react-beautiful-dnd';
-
 // Required for server side rendering as count is persisted across requests
 export const resetStyleContext = () => {
   count = 0;

stories/src/board/board.jsx

@@ -39,7 +39,6 @@ type Props = {|
 type State = {|
   columns: QuoteMap,
   ordered: string[],
-  autoFocusQuoteId: ?string,
 |}
 
 export default class Board extends Component<Props, State> {
@@ -48,7 +47,6 @@ export default class Board extends Component<Props, State> {
   state: State = {
     columns: this.props.initial,
     ordered: Object.keys(this.props.initial),
-    autoFocusQuoteId: null,
   }
 
   boardRef: ?HTMLElement
@@ -64,10 +62,6 @@ export default class Board extends Component<Props, State> {
 
   onDragStart = (initial: DragStart) => {
     publishOnDragStart(initial);
-
-    this.setState({
-      autoFocusQuoteId: null,
-    });
   }
 
   onDragEnd = (result: DropResult) => {
@@ -110,7 +104,6 @@ export default class Board extends Component<Props, State> {
 
     this.setState({
       columns: data.quoteMap,
-      autoFocusQuoteId: data.autoFocusQuoteId,
     });
   }
 
@@ -134,7 +127,6 @@ export default class Board extends Component<Props, State> {
                 index={index}
                 title={key}
                 quotes={columns[key]}
-                autoFocusQuoteId={this.state.autoFocusQuoteId}
               />
             ))}
           </Container>

stories/src/board/column.jsx

@@ -32,7 +32,6 @@ type Props = {|
   title: string,
   quotes: Quote[],
   index: number,
-  autoFocusQuoteId: ?string,
 |}
 
 export default class Column extends Component<Props> {
@@ -59,7 +58,6 @@ export default class Column extends Component<Props> {
               listId={title}
               listType="QUOTE"
               quotes={quotes}
-              autoFocusQuoteId={this.props.autoFocusQuoteId}
             />
           </Container>
         )}

stories/src/multiple-horizontal/quote-app.jsx

@@ -35,7 +35,6 @@ export default class QuoteApp extends Component<Props, State> {
 
   state: State = {
     quoteMap: this.props.initial,
-    autoFocusQuoteId: null,
   };
 
   onDragStart = (initial: DragStart) => {
@@ -58,7 +57,7 @@ export default class QuoteApp extends Component<Props, State> {
   }
 
   render() {
-    const { quoteMap, autoFocusQuoteId } = this.state;
+    const { quoteMap } = this.state;
 
     return (
       <DragDropContext
@@ -73,7 +72,6 @@ export default class QuoteApp extends Component<Props, State> {
               listId={key}
               listType="CARD"
               quotes={quoteMap[key]}
-              autoFocusQuoteId={autoFocusQuoteId}
             />
           ))}
         </Root>