Flagsmith / Flagsmith/flagsmith
Value filter not cleared when clicking 'Clear all' filters
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 121
Description
## Description
The "Clear all" filters functionality on the Features page does not properly clear the Value filter. When clicking "Clear all", the value filter input retains its value due to race conditions between the debounced search and the filter state reset.
## Steps to Reproduce
1. Navigate to the Features page
2. Open the Value filter dropdown
3. Enter a value in the "Feature Value" input
4. Click "Clear all" filters button
5. **Expected:** The Value filter input should be cleared
6. **Actual:** The Value filter input retains its value
## Root Cause
1. **Unstable callback references**: `handleFilterChange` and `goToPage` in `useFeatureFilters.ts` are not memoized, causing unnecessary re-renders
2. **Missing reset functionality**: `useDebouncedSearch.ts` lacks a `resetSearch` function to properly clear both the input and debounced state
3. **Single useEffect handling both reset and sync**: `TableValueFilter.tsx` uses one useEffect for both resetting and syncing, causing race conditions
## Proposed Solution
### 1. Memoize callbacks in `useFeatureFilters.ts`
```typescript
const handleFilterChange = useCallback((updates: Partial) => {
setFilters((prev) => ({ ...prev, ...updates }))
setPage(1)
}, [])
const goToPage = useCallback((newPage: number) => {
setPage(newPage)
}, [])
```
### 2. Add resetSearch and memoize callbacks in `useDebouncedSearch.ts`
- Add a `resetSearch` function that clears both `searchInput` and `search` state
- Use `useRef` to store the debounced function to avoid stale closures
- Memoize `handleSearchInput` and `resetSearch` with `useCallback`
### 3. Separate useEffects in `TableValueFilter.tsx`
- Effect 1: Handle external reset (Clear all)
- Effect 2: Sync internal search state to parent
### 4. Memoize `handleValueFilterChange` in `FeaturesTableFilters.tsx`
## Files to Modify
- `frontend/web/components/pages/features/hooks/useFeatureFilters.ts`
- `frontend/common/useDebouncedSearch.ts`
- `frontend/web/components/tables/TableValueFilter.tsx`
- `frontend/web/components/pages/features/components/FeaturesTableFilters.tsx`
## Related
This issue was identified during the FeaturesPage RTK Query migration (PR #6469).
Contributor guide
Assessment
This issue has not been assessed yet.