DataViews: Fix focus loss when removing all filters or resetting (#67003

) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>
WordPress · Nov 14, 2024 · e7f0dc5 · e7f0dc5
1 parent 645ce9f
commit e7f0dc5
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 42 deletions.
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix focus loss when removing all filters or resetting ([#67003](https://github.com/WordPress/gutenberg/pull/67003)).
+
 ## 4.7.0 (2024-10-30)
 
 ## 4.6.0 (2024-10-16)
@@ -23,8 +27,7 @@
 ## Internal
 
 -   The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
-- Filters no longer display the elements' description. ([#64674](https://github.com/WordPress/gutenberg/pull/64674))
-
+-   Filters no longer display the elements' description. ([#64674](https://github.com/WordPress/gutenberg/pull/64674))
 
 ## Enhancements
 

diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -7,6 +7,7 @@ import {
 	useRef,
 	useMemo,
 	useCallback,
+	useEffect,
 } from '@wordpress/element';
 import { __experimentalHStack as HStack, Button } from '@wordpress/components';
 import { funnel } from '@wordpress/icons';
@@ -70,7 +71,7 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 	}, [ fields, view ] );
 }
 
-export function FilterVisibilityToggle( {
+export function FiltersToggle( {
 	filters,
 	view,
 	onChangeView,
@@ -85,6 +86,7 @@ export function FilterVisibilityToggle( {
 	isShowingFilter: boolean;
 	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
 } ) {
+	const buttonRef = useRef< HTMLButtonElement >( null );
 	const onChangeViewWithFilterVisibility = useCallback(
 		( _view: View ) => {
 			onChangeView( _view );
@@ -98,48 +100,81 @@ export function FilterVisibilityToggle( {
 	if ( filters.length === 0 ) {
 		return null;
 	}
-	if ( ! hasVisibleFilters ) {
-		return (
-			<AddFilterMenu
-				filters={ filters }
-				view={ view }
-				onChangeView={ onChangeViewWithFilterVisibility }
-				setOpenedFilter={ setOpenedFilter }
-				trigger={
-					<Button
-						className="dataviews-filters__visibility-toggle"
-						size="compact"
-						icon={ funnel }
-						label={ __( 'Add filter' ) }
-						isPressed={ false }
-						aria-expanded={ false }
-					/>
-				}
-			/>
-		);
-	}
+
+	const addFilterButtonProps = {
+		label: __( 'Add filter' ),
+		'aria-expanded': false,
+		isPressed: false,
+	};
+	const toggleFiltersButtonProps = {
+		label: _x( 'Filter', 'verb' ),
+		'aria-expanded': isShowingFilter,
+		isPressed: isShowingFilter,
+		onClick: () => {
+			if ( ! isShowingFilter ) {
+				setOpenedFilter( null );
+			}
+			setIsShowingFilter( ! isShowingFilter );
+		},
+	};
+	const buttonComponent = (
+		<Button
+			ref={ buttonRef }
+			className="dataviews-filters__visibility-toggle"
+			size="compact"
+			icon={ funnel }
+			{ ...( hasVisibleFilters
+				? toggleFiltersButtonProps
+				: addFilterButtonProps ) }
+		/>
+	);
 	return (
 		<div className="dataviews-filters__container-visibility-toggle">
-			<Button
-				className="dataviews-filters__visibility-toggle"
-				size="compact"
-				icon={ funnel }
-				label={ _x( 'Filter', 'verb' ) }
-				onClick={ () => {
-					if ( ! isShowingFilter ) {
-						setOpenedFilter( null );
-					}
-					setIsShowingFilter( ! isShowingFilter );
-				} }
-				isPressed={ isShowingFilter }
-				aria-expanded={ isShowingFilter }
-			/>
-			{ hasVisibleFilters && !! view.filters?.length && (
+			{ ! hasVisibleFilters ? (
+				<AddFilterMenu
+					filters={ filters }
+					view={ view }
+					onChangeView={ onChangeViewWithFilterVisibility }
+					setOpenedFilter={ setOpenedFilter }
+					trigger={ buttonComponent }
+				/>
+			) : (
+				<FilterVisibilityToggle
+					buttonRef={ buttonRef }
+					filtersCount={ view.filters?.length }
+				>
+					{ buttonComponent }
+				</FilterVisibilityToggle>
+			) }
+		</div>
+	);
+}
+
+function FilterVisibilityToggle( {
+	buttonRef,
+	filtersCount,
+	children,
+}: {
+	buttonRef: React.RefObject< HTMLButtonElement >;
+	filtersCount?: number;
+	children: React.ReactNode;
+} ) {
+	// Focus the `add filter` button when unmounts.
+	useEffect(
+		() => () => {
+			buttonRef.current?.focus();
+		},
+		[ buttonRef ]
+	);
+	return (
+		<>
+			{ children }
+			{ !! filtersCount && (
 				<span className="dataviews-filters-toggle__count">
-					{ view.filters?.length }
+					{ filtersCount }
 				</span>
 			) }
-		</div>
+		</>
 	);
 }
 

diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
@@ -16,7 +16,7 @@ import DataViewsContext from '../dataviews-context';
 import {
 	default as DataViewsFilters,
 	useFilters,
-	FilterVisibilityToggle,
+	FiltersToggle,
 } from '../dataviews-filters';
 import DataViewsLayout from '../dataviews-layout';
 import DataViewsFooter from '../dataviews-footer';
@@ -135,7 +135,7 @@ export default function DataViews< Item >( {
 						className="dataviews__search"
 					>
 						{ search && <DataViewsSearch label={ searchLabel } /> }
-						<FilterVisibilityToggle
+						<FiltersToggle
 							filters={ filters }
 							view={ view }
 							onChangeView={ onChangeView }