Font Library: Fix focus loss when update/install button is pressed (#…

…58364) * Font Library: Fix focus loss when update/install button is pressed * Add undefined
WordPress · Jan 30, 2024 · c564ece · c564ece · github-actions · Jan 30, 2024
1 parent 2b608f9
commit c564ece
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -199,9 +199,10 @@ function FontCollection( { slug } ) {
 			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
-				fontsToInstall.length > 0 && (
-					<Footer handleInstall={ handleInstall } />
-				)
+				<Footer
+					handleInstall={ handleInstall }
+					isDisabled={ fontsToInstall.length === 0 }
+				/>
 			}
 		>
 			{ renderConfirmDialog && (
@@ -290,16 +291,18 @@ function FontCollection( { slug } ) {
 	);
 }
 
-function Footer( { handleInstall } ) {
+function Footer( { handleInstall, isDisabled } ) {
 	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (
 		<Flex justify="flex-end">
 			<Button
 				variant="primary"
-				onClick={ handleInstall }
+				onClick={
+					isDisabled || isInstalling ? undefined : handleInstall
+				}
 				isBusy={ isInstalling }
-				disabled={ isInstalling }
+				aria-disabled={ isDisabled || isInstalling }
 			>
 				{ __( 'Install' ) }
 			</Button>

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -186,9 +186,11 @@ function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
 				) }
 			</div>
 			<Button
-				disabled={ ! fontFamiliesHasChanges }
+				aria-disabled={ ! fontFamiliesHasChanges }
 				variant="primary"
-				onClick={ saveFontFamilies }
+				onClick={
+					fontFamiliesHasChanges ? saveFontFamilies : undefined
+				}
 			>
 				{ __( 'Update' ) }
 			</Button>