[Data Grid] GridFilterPanelProps is missing some of props in filterFormProps eg. applyFilterChanges

[MichalBunkowski]

Order ID or Support key 💳 (optional)

51216

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I'm migrating @mui/x-data-grid-pro from v5 to v6. In our code base we are using applyFilterChangesto sync React Admin filters with Data Grid filters. In latest version I noticed it's not available to pass it without TypeScript error.

Export of GridFilterPanelProps:

export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: SxProps<Theme>;
    /**
     * Function that returns the next filter item to be picked as default filter.
     * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
     * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
     */
    getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null;
    /**
     * Props passed to each filter form.
     */
    filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
    /**
     * If `true`, the `Add filter` button will not be displayed.
     * @default false
     */
    disableAddFilterButton?: boolean;
    /**
     * If `true`, the `Remove all` button will be disabled
     * @default false
     */
    disableRemoveAllButton?: boolean;
    /**
     * @ignore - do not document.
     */
    children?: React.ReactNode;
}

Workaround:

     slotProps={{
        row: {
          onContextMenu: handleContextMenu
        },
        filterPanel: {
          logicOperators: onFilterModelChange ? [] : [GridLogicOperator.And, GridLogicOperator.Or],
          filterFormProps: {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            //@ts-ignore
            applyFilterChanges: onApplyFilterChanges,
            valueInputProps: {
              InputComponentProps: {
                variant: "standard" // by default, the autocomplete component (is any of) has 'filled' variant
              }
            }
          }
        },
        toolbar: {
          hidePagination: hideFooter,
          Toolbar: Toolbar,
          paginationActions,
          disableCheckboxSelection,
          modelName
        }
      }}

Your environment 🌎

`npx @mui/envinfo`

    System:
    OS: macOS 13.5
  Binaries:
    Node: 18.16.0 - ~/.volta/tools/image/node/18.16.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 9.5.1 - ~/.volta/tools/image/node/18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.10.4 => 11.11.1 
    @emotion/styled: ^11.10.4 => 11.11.0 
    @mui/base:  5.0.0-beta.4 
    @mui/core-downloads-tracker:  5.13.4 
    @mui/icons-material:  5.11.16 
    @mui/material: ^5.10.4 => 5.13.5 
    @mui/private-theming:  5.13.1 
    @mui/styled-engine:  5.13.2 
    @mui/system:  5.13.5 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.6 
    @mui/x-data-grid:  6.12.0 
    @mui/x-data-grid-pro: ^6.12.0 => 6.12.0 
    @mui/x-date-pickers:  6.12.0 
    @mui/x-date-pickers-pro: ^6.12.0 => 6.12.0 
    @mui/x-license-pro:  6.10.2 
    @types/react: 18.0.28 => 18.0.28 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ~5.0.2 => 5.0.4 

[MBilalShafi]

@MichalBunkowski thanks for reporting the issue. The typescript interface was the same with v5, it includes only those props that the users are supposed to override excluding internal methods which might break some functionality if not used carefully. This issue surfaced in v6 because we bundled a types support for slotProps in v6 which was missing previously.

By the way, could you expand on why you need to override the applyFilterChanges method? I mean if it's for listening to the filter changes for example, you could do this by onFilterModelChange event handler which would be a more appropriate way to do that. So if you could explain your exact use case, it'll help understand the need better.

Thank You!

[MichalBunkowski]

@MBilalShafi I reviewed my implementation and onFilterModelChange worked as you said! Thank you!

I was basically listening to filter changes and comparing them with react-admin filters which made little sense.

[MBilalShafi]

@MBilalShafi I reviewed my implementation and onFilterModelChange worked as you said!

Good to know 🎉, I'll close the issue in that case, feel free to reopen/follow-up if you face another related issue.