[data grid] Filter panel form fail to update when `filterModel` changes about mui-x HOT 6 CLOSED

I'm working on this. It's posing somewhat of a challenge to replicate though as our actual implementation is very server oriented. Given that I can't just hook a code sandbox up to our server's filtering and other functionality very easily it's not working quite the same. I'll post the link as soon as I get this to a reasonable state. Might take me another day or so.

from mui-x.

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

from mui-x.

https://codesandbox.io/s/data-grid-community-forked-kt97wv?file=/src/App.tsx

Perhaps this will be enough to diagnose? I can't get it to fully replicate our current functionality. Some of our code can't be implemented in a demo sandbox as easily because we use a server side filtering setup with some Redux thunks that act upon the filter model as it changes. Because of this it seems that the sandbox doesn't want to apply the Recent / Shipped filters like our actual codebase will. As mentioned the real codebase does at least apply the filters correctly, but leaves the form with a single initial date range filter row. However, the sandbox does clearly show in the console that it gets to the onFilterChange function, but fails to filter or change the form in this case. If this isn't enough let me know and I can keep trying to tweak.

In case it helps, the primary difference between our code and the sandbox is just a simple hook to retrigger the Redux thunk and update the state data that the table uses whenever the filter model changes.

That looks like this

export function useFetchOrders(filterModel, paginationModel, sortModel) {
  const dispatch = useAppDispatch();

  const status = useAppSelector(getOrderStatus);
  const data = useAppSelector(orderHeaderSelectors.selectAll);
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    const fetch = async (filterModel) => {
      let results = await dispatch(
        fetchOrders(filterModel, paginationModel, sortModel),
      );
      setCount(results.data?.count);
      return results;
    };

    fetch(filterModel);
  }, [dispatch, filterModel, paginationModel, sortModel]);

  const isLoading = status === 'loading' || status === undefined;

  return { data, isLoading, count };
}

and the data and isLoading values are then passed to the DataGrid as the rows and loading props respectively.

If necessary, I could also provide a login for our beta site as a live or even access to our code repo. My boss said it shouldn't be that big of a deal, but it might require some kind of NDA signed for the safety of our code and data at that point. I wasn't really sure how feasible that is. I know some organizations that provide commercial support will do this, but I'm not sure if that's how you guys tend to operate.

from mui-x.

For what this is worth, I did manage to find a workaround for my use case. The documentation specifically recommends avoiding it except as a last resort, but it seems that if I add an apiRef to the QuickButtonPanel component and directly call apiRef.current.setFilterModel({data}) with the filter values I want everything updates correctly. If this is what you would advise that's fine. I feel like this working means I've messed up somewhere in my onFilterChange or something to cause it to not update properly. Wouldn't surprise me as I'm still learning new things about your API daily. If that is the case though I'd prefer to properly fix it rather than opting for the last resort option.

Just so you can see what I mean here is the change I made in my local version

QuickButtonPanel.tsx 


  const recentHandler = () => {
    apiRef.current.setFilterModel({
      items: [
        {
          id: 2,
          field: 'request_date',
          operator: 'between',
          value: {
            start: moment(new Date())
              .subtract(2, 'months')
              .format('YYYY-MM-DD'),
            end: moment(new Date()).format('YYYY-MM-DD'),
          },
        },
        {
          id: 3,
          field: 'open_order',
          operator: 'equals',
          value: false,
        },
        { id: 4, field: 'ready_to_fulfill', operator: 'equals', value: true },
      ],
    });
  };

from mui-x.

I'm glad you already figured out the way to fix the issue, I couldn't get your codesandbox example to work, though I suspect the issue might be related to not having the correct dependencies in the React.useCallback function onFilterChange due to which it always has the initial or outdated value of the variables it's using and the expected behavior is not achieved.

Could you try adding the dependencies and see if it fixes the problem or make the codesandbox example work? I'll be happy to have another look over it.

Thanks

from mui-x.

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

from mui-x.