feat: Use autofocus and improve tests

packages/editor/src/components/post-title/index.js

@@ -43,14 +43,6 @@ class PostTitle extends Component {
 		};
 	}
 
-	componentDidMount() {
-		// If there is a post title and it's empty, we should focus the title so
-		// the user can start typing the title right away.
-		if ( ! this.props.title || ! this.props.title.length ) {
-			this.textareaRef.current.textarea.focus();
-		}
-	}
-
 	handleFocusOutside() {
 		this.onUnselect();
 	}
@@ -128,7 +120,13 @@ class PostTitle extends Component {
 								onFocus={ this.onSelect }
 								onKeyDown={ this.onKeyDown }
 								onKeyPress={ this.onUnselect }
-								ref={ this.textareaRef }
+								/*
+									Only autofocus the title when the post is entirely empty.
+									This should only happen for a new post, which means we
+									focus the title on new post so the author can start typing
+									right away, without needing to click anything.
+								*/
+								autofocus={ this.props.isPostEmpty ? 'autofocus' : undefined }
 							/>
 						</KeyboardShortcuts>
 						{ isSelected && isPostTypeViewable && <PostPermalink /> }
@@ -140,12 +138,13 @@ class PostTitle extends Component {
 }
 
 const applyWithSelect = withSelect( ( select ) => {
-	const { getEditedPostAttribute, getEditorSettings } = select( 'core/editor' );
+	const { getEditedPostAttribute, getEditorSettings, isEditedPostSaveable } = select( 'core/editor' );
 	const { getPostType } = select( 'core' );
 	const postType = getPostType( getEditedPostAttribute( 'type' ) );
 	const { titlePlaceholder, focusMode, hasFixedToolbar } = getEditorSettings();
 
 	return {
+		isPostEmpty: ! isEditedPostSaveable(),
 		title: getEditedPostAttribute( 'title' ),
 		isPostTypeViewable: get( postType, [ 'viewable' ], false ),
 		placeholder: titlePlaceholder,

test/e2e/specs/new-post.test.js

@@ -30,15 +30,29 @@ describe( 'new editor state', () => {
 	} );
 
 	it( 'should focus the title if the title is empty', async () => {
+		// We need to remove the tips to make sure they aren't clicked/removed
+		// during our check of the title `textarea`'s focus.
+		await page.evaluate( () => {
+			return wp.data.dispatch( 'core/nux' ).disableTips();
+		} );
+
+		// And then reload the page to ensure we get a new page that should
+		// autofocus the title, without any NUX tips.
+		await page.reload();
+
 		const activeElementClasses = await page.evaluate( () => {
 			return Object.values( document.activeElement.classList );
 		} );
 		const activeElementTagName = await page.evaluate( () => {
 			return document.activeElement.tagName.toLowerCase();
 		} );
+		const titleAutofocus = await page.$eval( '.editor-post-title__input', ( element ) => {
+			return element.getAttribute( 'autofocus' );
+		} );
 
 		expect( activeElementClasses ).toContain( 'editor-post-title__input' );
 		expect( activeElementTagName ).toEqual( 'textarea' );
+		expect( titleAutofocus ).toEqual( 'autofocus' );
 	} );
 
 	it( 'should not focus the title if the title exists', async () => {
@@ -56,10 +70,14 @@ describe( 'new editor state', () => {
 		const activeElementTagName = await page.evaluate( () => {
 			return document.activeElement.tagName.toLowerCase();
 		} );
+		const titleAutofocus = await page.$eval( '.editor-post-title__input', ( element ) => {
+			return element.getAttribute( 'autofocus' );
+		} );
 
 		expect( activeElementClasses ).not.toContain( 'editor-post-title__input' );
-		// The document body should be the `activeElement`, because nothing is
+		// The document `body` should be the `activeElement`, because nothing is
 		// focused by default when a post already has a title.
 		expect( activeElementTagName ).toEqual( 'body' );
+		expect( titleAutofocus ).toEqual( null );
 	} );
 } );