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:
parent
d4aacb13be
commit
25255923b8
@ -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",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user