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.
This commit is contained in:
Ben Senescu 2026-04-02 00:47:25 -04:00 committed by Ben Senescu
parent d4aacb13be
commit 25255923b8

View File

@ -1,5 +1,5 @@
import { useCallback } from "react"; import { useCallback } from "react";
import { useForm } from "@tanstack/react-form"; import { useForm, useStore } from "@tanstack/react-form";
import { import {
EMPTY_FILTERS, EMPTY_FILTERS,
type KeywordFilterValues, type KeywordFilterValues,
@ -10,7 +10,8 @@ export function useLocalKeywordFilters() {
defaultValues: EMPTY_FILTERS, defaultValues: EMPTY_FILTERS,
}); });
const values = filtersForm.state.values; const values = useStore(filtersForm.store, (s) => s.values);
const resetFilters = useCallback(() => { const resetFilters = useCallback(() => {
const keys: Array<keyof KeywordFilterValues> = [ const keys: Array<keyof KeywordFilterValues> = [
"include", "include",