Editor: Update focus return handler for the Featured Image

packages/editor/src/components/post-featured-image/index.js

@@ -18,7 +18,7 @@ import {
 	Notice,
 } from '@wordpress/components';
 import { isBlobURL } from '@wordpress/blob';
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import {
@@ -102,17 +102,10 @@ function PostFeaturedImage( {
 	noticeOperations,
 	isRequestingFeaturedImageMedia,
 } ) {
-	const toggleRef = useRef();
+	const focusToggleRef = useRef( false );
 	const [ isLoading, setIsLoading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
 	const { mediaSourceUrl } = getMediaDetails( media, currentPostId );
-	const toggleFocusTimerRef = useRef();
-
-	useEffect( () => {
-		return () => {
-			clearTimeout( toggleFocusTimerRef.current );
-		};
-	}, [] );
 
 	function onDropFiles( filesList ) {
 		getSettings().mediaUpload( {
@@ -203,7 +196,15 @@ function PostFeaturedImage( {
 								) : (
 									<Button
 										__next40pxDefaultSize
-										ref={ toggleRef }
+										ref={ ( node ) => {
+											if (
+												focusToggleRef.current &&
+												node
+											) {
+												node.focus();
+												focusToggleRef.current = false;
+											}
+										} }
 										className={
 											! featuredImageId
 												? 'editor-post-featured-image__toggle'
@@ -276,12 +277,10 @@ function PostFeaturedImage( {
 											className="editor-post-featured-image__action"
 											onClick={ () => {
 												onRemoveImage();
-												// The toggle button is rendered conditionally, we need
-												// to wait it is rendered before moving focus to it.
-												toggleFocusTimerRef.current =
-													setTimeout( () => {
-														toggleRef.current?.focus();
-													} );
+												// Signal that the toggle button should be focused,
+												// when it is rendered. Can't focus it directly here
+												// because it's rendered conditionally.
+												focusToggleRef.current = true;
 											} }
 											variant={
 												isMissingMedia