diff --git a/src/components/TableToolbar/Filters/FilterInputsCollection.tsx b/src/components/TableToolbar/Filters/FilterInputsCollection.tsx index adbc9215..bfc4fcb5 100644 --- a/src/components/TableToolbar/Filters/FilterInputsCollection.tsx +++ b/src/components/TableToolbar/Filters/FilterInputsCollection.tsx @@ -44,8 +44,8 @@ export default function FilterInputsCollection({ {queries.map((query, index) => { return ( {(provided) => ( @@ -58,7 +58,7 @@ export default function FilterInputsCollection({ filterColumns={filterColumns} selectedColumn={selectedColumns[index]} handleChangeColumn={(key: string) => { - handleColumnChange(query.key, key); + handleColumnChange(query.id, key); }} availableFilters={ availableFiltersForEachSelectedColumn[index] @@ -103,16 +103,19 @@ export default function FilterInputsCollection({ return !find(selectedColumns, { key: column.key }); }); + const id = Math.random(); + setQueries((prevQueries) => [ ...prevQueries, { key: "", operator: "", value: "", + id, }, ]); - handleColumnChange("", column?.key ?? filterColumns[0].key); + handleColumnChange(id, column?.key ?? filterColumns[0].key); }} startIcon={} > diff --git a/src/components/TableToolbar/Filters/Filters.tsx b/src/components/TableToolbar/Filters/Filters.tsx index f2fbdf05..3c315fc8 100644 --- a/src/components/TableToolbar/Filters/Filters.tsx +++ b/src/components/TableToolbar/Filters/Filters.tsx @@ -189,7 +189,7 @@ export default function Filters() { tableSchema.joinOperator === "AND" ? "AND" : "OR" ); } - }, [userSettings.tables?.[tableId]?.joinOperator]); + }, [userSettings.tables?.[tableId]?.joinOperator, tableSchema.joinOperator]); useEffect(() => { if (tableFiltersOverridable && (hasUserFilters || userFilters === null)) { diff --git a/src/components/TableToolbar/Filters/useFilterInputs.ts b/src/components/TableToolbar/Filters/useFilterInputs.ts index f1155152..9215bbfd 100644 --- a/src/components/TableToolbar/Filters/useFilterInputs.ts +++ b/src/components/TableToolbar/Filters/useFilterInputs.ts @@ -44,13 +44,14 @@ export const useFilterInputs = ( value: getFieldProp("filter", getFieldType(filterColumns[0])) .defaultValue ?? "", + id: Math.random(), }, ] : []; // State for filter inputs const [queries, setQueries] = useState( - defaultQuery ? [defaultQuery] : INITIAL_QUERY + defaultQuery ? [{ ...defaultQuery, id: Math.random() }] : INITIAL_QUERY ); const resetQuery = () => setQueries([]); @@ -58,11 +59,11 @@ export const useFilterInputs = ( const [joinOperator, setJoinOperator] = useState<"AND" | "OR">("AND"); // When the user sets a new column, automatically set the operator and value - const handleColumnChange = (oldKey: string, newKey: string) => { + const handleColumnChange = (oldId: number, newKey: string) => { if (newKey === "_rowy_ref.id") { setQueries((prevQueries) => { const newQueries = [...prevQueries]; - const query = find(newQueries, ["key", oldKey]); + const query = find(newQueries, ["id", oldId]); if (query) { query.key = newKey; query.operator = "id-equal"; @@ -79,7 +80,7 @@ export const useFilterInputs = ( const filter = getFieldProp("filter", getFieldType(column)); setQueries((prevQueries) => { const newQueries = [...prevQueries]; - const query = find(newQueries, ["key", oldKey]); + const query = find(newQueries, ["id", oldId]); if (query) { query.key = newKey; query.operator = filter.operators[0].value; @@ -98,9 +99,12 @@ export const useFilterInputs = ( } const availableFiltersForEachSelectedColumn: IFieldConfig["filter"][] = - selectedColumns.map((column) => - getFieldProp("filter", getFieldType(column)) - ); + selectedColumns.map((column) => { + if (column.key === "_rowy_ref.id") { + return { operators: [{ value: "id-equal", label: "is" }] }; + } + return getFieldProp("filter", getFieldType(column)); + }); return { filterColumns, diff --git a/src/types/table.d.ts b/src/types/table.d.ts index c19d0088..45909735 100644 --- a/src/types/table.d.ts +++ b/src/types/table.d.ts @@ -198,6 +198,7 @@ export type TableFilter = { | "color-not-equal" | ""; value: any; + id: number; }; export const TableTools = [