From 830a8dcc87eea392675fd14633dbca814eaecb3a Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 15 Nov 2024 10:37:18 +0100
Subject: [PATCH] Address more CR feedback.

---
 .../components/post-featured-image/index.js   | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index 064e6b9e0d9760..46a194f311a5e7 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/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 } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import {
@@ -106,6 +106,13 @@ function PostFeaturedImage( {
 	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( {
@@ -269,7 +276,12 @@ function PostFeaturedImage( {
 											className="editor-post-featured-image__action"
 											onClick={ () => {
 												onRemoveImage();
-												toggleRef.current.focus();
+												// The toggle button is rendered conditionally, we need
+												// to wait it is rendered before moving focus to it.
+												toggleFocusTimerRef.current =
+													setTimeout( () => {
+														toggleRef.current?.focus();
+													} );
 											} }
 											variant={
 												isMissingMedia
@@ -294,15 +306,10 @@ function PostFeaturedImage( {
 }
 
 const applyWithSelect = withSelect( ( select ) => {
-	const { getMedia, getPostType } = select( coreStore );
+	const { getMedia, getPostType, hasFinishedResolution } =
+		select( coreStore );
 	const { getCurrentPostId, getEditedPostAttribute } = select( editorStore );
 	const featuredImageId = getEditedPostAttribute( 'featured_media' );
-	const isRequestingFeaturedImageMedia =
-		!! featuredImageId &&
-		! select( coreStore ).hasFinishedResolution( 'getMedia', [
-			featuredImageId,
-			{ context: 'view' },
-		] );
 
 	return {
 		media: featuredImageId
@@ -311,7 +318,12 @@ const applyWithSelect = withSelect( ( select ) => {
 		currentPostId: getCurrentPostId(),
 		postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		featuredImageId,
-		isRequestingFeaturedImageMedia,
+		isRequestingFeaturedImageMedia:
+			!! featuredImageId &&
+			! hasFinishedResolution( 'getMedia', [
+				featuredImageId,
+				{ context: 'view' },
+			] ),
 	};
 } );