Open m-konkov opened 1 year ago
I think it can be possible to reset the values ​​when rendering with useRef and applyValue in condition:
const refColumnField = useRef(item.columnField);
if (refColumnField.current !== item.columnField) {
applyValue({ ....item, value: emptyValue }); // reset filter value on change column field
refColumnField.current = item.columnField
}
return ... // InputComponent
And one more thing: Why is useEffect
and useState
is used to sync input state in packages\grid\x-data-grid\src\components\panel\filterPanel\GridFilterInputMultipleSingleSelect.tsx
and other default InputComponents? Although you can directly use the values from the props InputComponent props.
We should remove this effect and try to move the logic to inside the component that is rendering each item. To not add operator-specific logic inside it we could add callback to the operator definition to get the initial values for a operator. Something like that:
diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
index 1e13b9b5e..26811b829 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -301,11 +301,16 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
!newOperator.InputComponent ||
newOperator.InputComponent !== currentOperator?.InputComponent;
+ let initialValue = eraseItemValue ? undefined : item.value;
+ if (newOperator.getInitialValue) {
+ initialValue = newOperator.getInitialValue(item.value);
+ }
+
applyFilterChanges({
...item,
field,
operator: newOperator.value,
- value: eraseItemValue ? undefined : item.value,
+ value: initialValue,
});
},
[apiRef, applyFilterChanges, item, currentColumn, currentOperator],
I found a small workaround
It's not a workaround. If the InputComponent
is different we erase the value.
Why is useEffect and useState is used to sync input state in packages\grid\x-data-grid\src\components\panel\filterPanel\GridFilterInputMultipleSingleSelect.tsx and other default InputComponents?
We do that way to separate the concerns. The useGridFilter
hook doesn't contain specific logic for a particular operator, everything has to go inside the input component.
I'm encountering this issue in our project as well, with two additional wrinkles that make this more severe for us:
1) We're using valueOptions
, and the previous value is rendered as a filter on the newly selected column if it is the same type but even when it isn't a valid option on the new column.
2) We're using the filterModel
to drive params of a web request (results are paginated server-side). This results in an invalid param being sent to the server, causing unnecessary 500 errors.
Order ID 72484
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/why-filters-update-forked-9dzoq4
Steps:
Current behavior 😯
When I change filters they use the previous values and then cleaning is going on. I looked at the code, it looks like this is happening in the component for filtering (in useEffect). For example: packages\grid\x-data-grid\src\components\panel\filterPanel\GridFilterInputMultipleSingleSelect.tsx![image](https://user-images.githubusercontent.com/120579233/222520551-832b80ba-f509-42a9-bc06-3632fb081f1c.png)
Expected behavior 🤔
Expected:
Context 🔦
I ran into this while trying to develop a custom component to set a filter value. When switching between columns with a multiselect (my custom component) I got old value for multiselect which is wrong considering different valueOptions for columns.
I found a small workaround:
InputComponent: (params) => <MultiselectFilterValue {...params} />
Using this code, I created a unique component for each filter and the values ​​began to be updated as I needed. But it still doesn't look like a good solution.
Your environment 🌎
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```npx @mui/envinfo
Order ID or Support key 💳 (optional)
58079