Multi-selection: fix clearing with side click

WordPress · Jan 23, 2020 · 87d0857 · 87d0857
1 parent dcb08f3
commit 87d0857
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/focus-capture.js b/packages/block-editor/src/components/writing-flow/focus-capture.js
@@ -36,6 +36,7 @@ const FocusCapture = forwardRef( ( {
 	containerRef,
 	noCapture,
 	hasMultiSelection,
+	multiSelectionContainer,
 }, ref ) => {
 	const isNavigationMode = useSelect( ( select ) =>
 		select( 'core/block-editor' ).isNavigationMode()
@@ -54,7 +55,7 @@ const FocusCapture = forwardRef( ( {
 		// depending on the direction.
 		if ( ! selectedClientId ) {
 			if ( hasMultiSelection ) {
-				containerRef.current.focus();
+				multiSelectionContainer.current.focus();
 				return;
 			}
 

diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -196,6 +196,7 @@ export default function WritingFlow( { children } ) {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
+	const multiSelectionContainer = useRef();
 
 	const entirelySelected = useRef();
 
@@ -385,7 +386,7 @@ export default function WritingFlow( { children } ) {
 			} else if ( isEscape ) {
 				setNavigationMode( true );
 			}
-		} else if ( hasMultiSelection && isTab && target === container.current ) {
+		} else if ( hasMultiSelection && isTab && target === multiSelectionContainer.current ) {
 			// See comment above.
 			noCapture.current = true;
 
@@ -501,7 +502,7 @@ export default function WritingFlow( { children } ) {
 
 	useEffect( () => {
 		if ( hasMultiSelection && ! isMultiSelecting ) {
-			container.current.focus();
+			multiSelectionContainer.current.focus();
 		}
 	}, [ hasMultiSelection, isMultiSelecting ] );
 
@@ -516,14 +517,21 @@ export default function WritingFlow( { children } ) {
 				containerRef={ container }
 				noCapture={ noCapture }
 				hasMultiSelection={ hasMultiSelection }
+				multiSelectionContainer={ multiSelectionContainer }
 			/>
 			<div
 				ref={ container }
 				onKeyDown={ onKeyDown }
 				onMouseDown={ onMouseDown }
-				tabIndex={ hasMultiSelection ? '0' : undefined }
-				aria-label={ hasMultiSelection ? __( 'Multiple selected blocks' ) : undefined }
 			>
+				<div
+					ref={ multiSelectionContainer }
+					tabIndex={ hasMultiSelection ? '0' : undefined }
+					aria-label={ hasMultiSelection ? __( 'Multiple selected blocks' ) : undefined }
+					// Needs to be positioned within the viewport, so focus to this
+					// element does not scroll the page.
+					style={ { position: 'fixed' } }
+				/>
 				{ children }
 			</div>
 			<FocusCapture
@@ -532,6 +540,7 @@ export default function WritingFlow( { children } ) {
 				containerRef={ container }
 				noCapture={ noCapture }
 				hasMultiSelection={ hasMultiSelection }
+				multiSelectionContainer={ multiSelectionContainer }
 				isReverse
 			/>
 			<div