DOM: Abort selection range set on unset range target (#8691)

packages/dom/src/dom.js

@@ -266,8 +266,9 @@ export function placeCaretAtHorizontalEdge( container, isReverse ) {
 		return;
 	}
 
+	container.focus();
+
 	if ( ! container.isContentEditable ) {
-		container.focus();
 		return;
 	}
 
@@ -276,6 +277,12 @@ export function placeCaretAtHorizontalEdge( container, isReverse ) {
 	// where `startContainer`, `endContainer` would always be container itself.
 	const rangeTarget = container[ isReverse ? 'lastChild' : 'firstChild' ];
 
+	// If no range target, it implies that the container is empty. Focusing is
+	// sufficient for caret to be placed correctly.
+	if ( ! rangeTarget ) {
+		return;
+	}
+
 	const selection = window.getSelection();
 	const range = document.createRange();
 
@@ -284,8 +291,6 @@ export function placeCaretAtHorizontalEdge( container, isReverse ) {
 
 	selection.removeAllRanges();
 	selection.addRange( range );
-
-	container.focus();
 }
 
 /**

test/e2e/specs/__snapshots__/splitting-merging.test.js.snap

@@ -6,6 +6,16 @@ exports[`splitting and merging blocks should delete an empty first line 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`splitting and merging blocks should gracefully handle if placing caret in empty container 1`] = `
+"<!-- wp:paragraph -->
+<p><strong>Foo</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`splitting and merging blocks should merge into inline boundary position 1`] = `
 "<!-- wp:paragraph -->
 <p>Bar</p>

test/e2e/specs/splitting-merging.test.js

@@ -101,4 +101,27 @@ describe( 'splitting and merging blocks', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should gracefully handle if placing caret in empty container', async () => {
+		// Regression Test: placeCaretAtHorizontalEdge previously did not
+		// account for contentEditables which have no children.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/8676
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Foo' );
+
+		// The regression appeared to only affect paragraphs created while
+		// within an inline boundary.
+		await page.keyboard.down( 'Shift' );
+		await pressTimes( 'ArrowLeft', 3 );
+		await page.keyboard.up( 'Shift' );
+		await pressWithModifier( 'mod', 'b' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );