DataViews: Fix filter toggle flickering when there are locked or primary filters (#75913) (#76068)

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: SirLouen <[email protected]>
Co-authored-by: t-hamano <[email protected]>

Author: 6 people

packages/dataviews/CHANGELOG.md

@@ -12,6 +12,7 @@
 - DataForm: Fix focus loss when collapsing in Card view. [#75689](https://github.com/WordPress/gutenberg/pull/75689)
 - DataViews: Avoid flickering while refreshing. [#74572](https://github.com/WordPress/gutenberg/pull/74572)
 - DataViews: Fix spacing in first column. [#75693](https://github.com/WordPress/gutenberg/pull/75693)
+- DataViews: Fix filter toggle flickering when there are locked or primary filters. [#75913](https://github.com/WordPress/gutenberg/pull/75913)
 - DataViews: Remove visual divider between quick and regular actions in the actions menu. [#75893](https://github.com/WordPress/gutenberg/pull/75893)
 - DataForm: field label for panel layout are no longer uppercased. [#75944](https://github.com/WordPress/gutenberg/pull/75944)
 

packages/dataviews/src/components/dataviews-filters/toggle.tsx

@@ -31,13 +31,13 @@ function FiltersToggle() {
 		},
 		[ onChangeView, setIsShowingFilter ]
 	);
-	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
 
-	const hasVisibleFilters = !! visibleFilters.length;
 	if ( filters.length === 0 ) {
 		return null;
 	}
 
+	const hasVisibleFilters = filters.some( ( filter ) => filter.isVisible );
+
 	const addFilterButtonProps = {
 		label: __( 'Add filter' ),
 		'aria-expanded': false,
@@ -54,12 +54,19 @@ function FiltersToggle() {
 			setIsShowingFilter( ! isShowingFilter );
 		},
 	};
+	// When there are primary or locked filters, the filter bar is always
+	// visible and cannot be hidden, so the toggle button should be disabled.
+	const hasPrimaryOrLockedFilters = filters.some(
+		( filter ) => filter.isPrimary || filter.isLocked
+	);
 	const buttonComponent = (
 		<Button
 			ref={ buttonRef }
 			className="dataviews-filters__visibility-toggle"
 			size="compact"
 			icon={ funnel }
+			disabled={ hasPrimaryOrLockedFilters }
+			accessibleWhenDisabled
 			{ ...( hasVisibleFilters
 				? toggleFiltersButtonProps
 				: addFilterButtonProps ) }