diff --git a/packages/block-editor/src/components/writing-flow/focus-capture.js b/packages/block-editor/src/components/writing-flow/focus-capture.js index 50e7fa9009f01..56bd1bc70b180 100644 --- 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 index 475be097c9132..1e3da8cda48e1 100644 --- 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 } />
+
{ children }
+

1

+ + + +

2

+" +`; + exports[`Multi-block selection should copy and paste 1`] = ` "

1

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 index cd7b19f264666..7adbdacd7f126 100644 --- 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(); + } ); } );