Merge pull request #9778 from google/enhancement/9312-fix-focus-trap

google · Nov 27, 2024 · 7b05544 · 7b05544
2 parents 5725d88 + d7164e7
commit 7b05544
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/assets/js/components/SelectionPanel/SelectionPanel.js b/assets/js/components/SelectionPanel/SelectionPanel.js
@@ -30,22 +30,32 @@ import SideSheet from '../SideSheet';
 export default function SelectionPanel( {
 	children,
 	isOpen,
+	isLoading,
 	onOpen,
 	closePanel,
 	className,
 } ) {
+	const classNameSelector = className
+		?.split( /\s+/ )
+		.map( ( name ) => `.${ name }` )
+		.join( '' );
+
+	const initialFocus = classNameSelector
+		? `${ classNameSelector } .googlesitekit-selection-panel-item .googlesitekit-selection-box input`
+		: '.googlesitekit-selection-panel-item .googlesitekit-selection-box input';
+
 	return (
 		<SideSheet
 			className={ classnames(
 				'googlesitekit-selection-panel',
 				className
 			) }
 			isOpen={ isOpen }
+			isLoading={ isLoading }
 			onOpen={ onOpen }
 			closeSheet={ closePanel }
 			focusTrapOptions={ {
-				initialFocus:
-					'.googlesitekit-selection-panel-item .googlesitekit-selection-box input',
+				initialFocus,
 			} }
 		>
 			{ children }
@@ -56,6 +66,7 @@ export default function SelectionPanel( {
 SelectionPanel.propTypes = {
 	children: PropTypes.node,
 	isOpen: PropTypes.bool,
+	isLoading: PropTypes.bool,
 	onOpen: PropTypes.func,
 	closePanel: PropTypes.func,
 	className: PropTypes.string,

diff --git a/assets/js/components/SideSheet.js b/assets/js/components/SideSheet.js
@@ -45,6 +45,7 @@ export default function SideSheet( {
 	className,
 	children,
 	isOpen,
+	isLoading,
 	onOpen = () => {},
 	closeSheet = () => {},
 	focusTrapOptions = {},
@@ -72,7 +73,7 @@ export default function SideSheet( {
 	return (
 		<Portal>
 			<FocusTrap
-				active={ !! isOpen }
+				active={ !! isOpen && ! isLoading }
 				focusTrapOptions={ {
 					fallbackFocus: 'body',
 					...focusTrapOptions,
@@ -104,6 +105,7 @@ SideSheet.propTypes = {
 	className: PropTypes.string,
 	children: PropTypes.node,
 	isOpen: PropTypes.bool,
+	isLoading: PropTypes.bool,
 	onOpen: PropTypes.func,
 	closeSheet: PropTypes.func,
 	focusTrapOptions: PropTypes.object,

diff --git a/...tics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItems.js b/...tics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItems.js
@@ -71,19 +71,6 @@ export default function AudienceItems( { savedItemSlugs = [] } ) {
 		syncAudiences();
 	}, [ firstView, isOpen, syncAvailableAudiences ] );
 
-	useEffect( () => {
-		// @TODO Explore more elegant option to re-establish the focus. After `syncAvailableAudiences`
-		// happens the focus is lost, even without preview block being shown.
-		if ( ! isLoading && isOpen ) {
-			const firstInput = document.querySelector(
-				'.googlesitekit-audience-selection-panel .googlesitekit-selection-panel-item input'
-			);
-			if ( firstInput ) {
-				firstInput.focus();
-			}
-		}
-	}, [ isLoading, isOpen ] );
-
 	const availableAudiences = useInViewSelect( ( select ) => {
 		const {
 			getConfigurableAudiences,

diff --git a/...es/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Panel.js b/...es/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Panel.js
@@ -57,6 +57,10 @@ export default function Panel() {
 	const isOpen = useSelect( ( select ) =>
 		select( CORE_UI ).getValue( AUDIENCE_SELECTION_PANEL_OPENED_KEY )
 	);
+	const isLoading = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).isFetchingSyncAvailableAudiences()
+	);
+
 	const savedItemSlugs = useInViewSelect( ( select ) => {
 		const { getConfigurableAudiences } = select( MODULES_ANALYTICS_4 );
 		const { getConfiguredAudiences } = select( CORE_USER );
@@ -104,6 +108,7 @@ export default function Panel() {
 			className="googlesitekit-audience-selection-panel"
 			closePanel={ closePanel }
 			isOpen={ isOpen || isCreatingAudienceFromOAuth }
+			isLoading={ isLoading }
 			onOpen={ onSideSheetOpen }
 		>
 			<Header closePanel={ closePanel } />