From 091cdc68125a85a8259ffe1a926c8d25d67e6da2 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 7 Aug 2018 17:03:32 -0400
Subject: [PATCH] DOM: Abort selection range set on unset range target

---
 packages/dom/src/dom.js                       | 11 ++++++---
 .../splitting-merging.test.js.snap            | 10 ++++++++
 test/e2e/specs/splitting-merging.test.js      | 23 +++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
index 7cc843c32e617..b62311310a383 100644
--- a/packages/dom/src/dom.js
+++ b/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();
 }
 
 /**
diff --git a/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap b/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap
index 3a3351fc00b8d..10f51e1be04b7 100644
--- a/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap
+++ b/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>
diff --git a/test/e2e/specs/splitting-merging.test.js b/test/e2e/specs/splitting-merging.test.js
index 5611dfc86ea11..7a65e53e8c011 100644
--- a/test/e2e/specs/splitting-merging.test.js
+++ b/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();
+	} );
 } );