Multi-selection: fix clearing with side click (#19787)

* Multi-selection: fix clearing with side click * Add e2e test
WordPress · Jan 28, 2020 · f6470e6 · f6470e6
1 parent c49b051
commit f6470e6
Show file tree

Hide file tree

Showing 4 changed files with 52 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
@@ -197,6 +197,7 @@ export default function WritingFlow( { children } ) {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
+	const multiSelectionContainer = useRef();
 
 	const entirelySelected = useRef();
 
@@ -386,7 +387,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;
 
@@ -502,7 +503,7 @@ export default function WritingFlow( { children } ) {
 
 	useEffect( () => {
 		if ( hasMultiSelection && ! isMultiSelecting ) {
-			container.current.focus();
+			multiSelectionContainer.current.focus();
 		}
 	}, [ hasMultiSelection, isMultiSelecting ] );
 
@@ -521,14 +522,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
@@ -537,6 +545,7 @@ export default function WritingFlow( { children } ) {
 				containerRef={ container }
 				noCapture={ noCapture }
 				hasMultiSelection={ hasMultiSelection }
+				multiSelectionContainer={ multiSelectionContainer }
 				isReverse
 			/>
 			<div

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap
@@ -8,6 +8,16 @@ exports[`Multi-block selection should allow selecting outer edge if there is no
 
 exports[`Multi-block selection should always expand single line selection 1`] = `""`;
 
+exports[`Multi-block selection should clear selection when clicking next to blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Multi-block selection should copy and paste 1`] = `
 "<!-- wp:paragraph -->
 <p>1</p>

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -449,4 +449,31 @@ describe( 'Multi-block selection', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should clear selection when clicking next to blocks', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+
+		await testNativeSelection();
+		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
+
+		const coord = await page.evaluate( () => {
+			const element = document.querySelector( '.wp-block-paragraph' );
+			const rect = element.getBoundingClientRect();
+			return {
+				x: rect.x - 1,
+				y: rect.y + ( rect.height / 2 ),
+			};
+		} );
+
+		await page.mouse.click( coord.x, coord.y );
+
+		await testNativeSelection();
+		expect( await getSelectedFlatIndices() ).toEqual( [] );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );