From 25255923b842494aeab9c09d5b85733d646cd24e Mon Sep 17 00:00:00 2001 From: Ben Senescu <44480372+bensenescu@users.noreply.github.com> Date: Thu, 2 Apr 2026 00:47:25 -0400 Subject: [PATCH] feat: add Apply button to keyword research filters (#59) * feat: add Apply button to keyword research filters Filters no longer live-update on every keystroke. Users can now set multiple filter fields and click "Apply" to apply them all at once. * fix: subscribe to form store so filter Apply button is reactive useStore(filtersForm.store) ensures re-renders on field changes, fixing the disabled Apply button when filter inputs have values. * fix: use useStore for reactive live-filtering in keyword filters Revert the Apply button approach in favor of the original live-filter behavior. The actual issue was that filtersForm.state.values didn't trigger re-renders on field changes. Using useStore(filtersForm.store) properly subscribes to the form store so filters apply as the user types. --- src/client/features/keywords/hooks/useLocalKeywordFilters.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/client/features/keywords/hooks/useLocalKeywordFilters.ts b/src/client/features/keywords/hooks/useLocalKeywordFilters.ts index 53b9cb9..ea5bd44 100644 --- a/src/client/features/keywords/hooks/useLocalKeywordFilters.ts +++ b/src/client/features/keywords/hooks/useLocalKeywordFilters.ts @@ -1,5 +1,5 @@ import { useCallback } from "react"; -import { useForm } from "@tanstack/react-form"; +import { useForm, useStore } from "@tanstack/react-form"; import { EMPTY_FILTERS, type KeywordFilterValues, @@ -10,7 +10,8 @@ export function useLocalKeywordFilters() { defaultValues: EMPTY_FILTERS, }); - const values = filtersForm.state.values; + const values = useStore(filtersForm.store, (s) => s.values); + const resetFilters = useCallback(() => { const keys: Array = [ "include",