Flagsmith / Flagsmith/flagsmith

Value filter not cleared when clicking 'Clear all' filters

Open
#6,523 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.