From 045a3a9a89d19fb668c64a34ed425db55b7d7ed9 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 14:38:30 +0100
Subject: [PATCH] Fix focus loss issue

---
 .../dataviews-view-config/index.tsx           | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 57bb590cfb8f17..6abe843e952261 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -245,6 +245,20 @@ function FieldItem( {
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
 } ) {
+	const focusVisibilityField = () => {
+		// Focus the visibility button to avoid focus loss.
+		// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
+		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+		setTimeout( () => {
+			const element = document.querySelector(
+				`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`
+			);
+			if ( element instanceof HTMLElement ) {
+				element.focus();
+			}
+		}, 50 );
+	};
+
 	return (
 		<Item>
 			<HStack
@@ -291,7 +305,10 @@ function FieldItem( {
 							disabled={ ! field.enableHiding }
 							accessibleWhenDisabled
 							size="compact"
-							onClick={ onToggleVisibility }
+							onClick={ () => {
+								onToggleVisibility();
+								focusVisibilityField();
+							} }
 							icon={ isVisible ? unseen : seen }
 							label={
 								isVisible
@@ -346,17 +363,6 @@ function RegularFieldItem( {
 						  )
 						: [ ...visibleFieldIds, field.id ],
 				} );
-				// Focus the visibility button to avoid focus loss.
-				// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
-				// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
-				setTimeout( () => {
-					const element = document.querySelector(
-						`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`
-					);
-					if ( element instanceof HTMLElement ) {
-						element.focus();
-					}
-				}, 50 );
 			} }
 			onMoveUp={
 				index !== undefined