Multi-select: use writing flow container for focus (#31572)

WordPress · May 6, 2021 · b773369 · b773369
1 parent 58a7d3f
commit b773369
Showing 1 changed file with 28 additions and 41 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -155,7 +155,6 @@ export default function WritingFlow( { children } ) {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
-	const multiSelectionContainer = useRef();
 
 	const entirelySelected = useRef();
 
@@ -283,6 +282,28 @@ export default function WritingFlow( { children } ) {
 		const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;
 		const { ownerDocument } = container.current;
 		const { defaultView } = ownerDocument;
+
+		if ( hasMultiSelection ) {
+			if ( keyCode === TAB ) {
+				// Disable focus capturing on the focus capture element, so it
+				// doesn't refocus this element and so it allows default behaviour
+				// (moving focus to the next tabbable element).
+				noCapture.current = true;
+
+				if ( isShift ) {
+					focusCaptureBeforeRef.current.focus();
+				} else {
+					focusCaptureAfterRef.current.focus();
+				}
+			} else if ( isNav ) {
+				const action = isShift ? expandSelection : moveSelection;
+				action( isReverse );
+				event.preventDefault();
+			}
+
+			return;
+		}
+
 		const selectedBlockClientId = getSelectedBlockClientId();
 
 		// In Edit mode, Tab should focus the first tabbable element after the
@@ -440,38 +461,9 @@ export default function WritingFlow( { children } ) {
 		}
 	}
 
-	function onMultiSelectKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
-		const isUp = keyCode === UP;
-		const isDown = keyCode === DOWN;
-		const isLeft = keyCode === LEFT;
-		const isRight = keyCode === RIGHT;
-		const isReverse = isUp || isLeft;
-		const isHorizontal = isLeft || isRight;
-		const isVertical = isUp || isDown;
-		const isNav = isHorizontal || isVertical;
-
-		if ( keyCode === TAB ) {
-			// Disable focus capturing on the focus capture element, so it
-			// doesn't refocus this element and so it allows default behaviour
-			// (moving focus to the next tabbable element).
-			noCapture.current = true;
-
-			if ( shiftKey ) {
-				focusCaptureBeforeRef.current.focus();
-			} else {
-				focusCaptureAfterRef.current.focus();
-			}
-		} else if ( isNav ) {
-			const action = shiftKey ? expandSelection : moveSelection;
-			action( isReverse );
-			event.preventDefault();
-		}
-	}
-
 	useEffect( () => {
 		if ( hasMultiSelection && ! isMultiSelecting ) {
-			multiSelectionContainer.current.focus();
+			container.current.focus();
 		}
 	}, [ hasMultiSelection, isMultiSelecting ] );
 
@@ -498,7 +490,7 @@ export default function WritingFlow( { children } ) {
 		if ( noCapture.current ) {
 			noCapture.current = null;
 		} else if ( hasMultiSelection ) {
-			multiSelectionContainer.current.focus();
+			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
 			lastFocus.current.focus();
 		} else {
@@ -529,21 +521,16 @@ export default function WritingFlow( { children } ) {
 				style={ PREVENT_SCROLL_ON_FOCUS }
 			/>
 			<div
-				ref={ multiSelectionContainer }
+				ref={ container }
+				className="block-editor-writing-flow"
+				onKeyDown={ onKeyDown }
+				onMouseDown={ onMouseDown }
 				tabIndex={ hasMultiSelection ? '0' : undefined }
 				aria-label={
 					hasMultiSelection
 						? __( 'Multiple selected blocks' )
 						: undefined
 				}
-				style={ PREVENT_SCROLL_ON_FOCUS }
-				onKeyDown={ onMultiSelectKeyDown }
-			/>
-			<div
-				ref={ container }
-				className="block-editor-writing-flow"
-				onKeyDown={ onKeyDown }
-				onMouseDown={ onMouseDown }
 			>
 				{ children }
 			</div>