[data grid] Providing InputComponentProps to valueInputProps in Filter Panel gives console warning due to props applying to all components in value column

[StylesTrip]

In the filter panel for the DataGrid, I want to provide some default props in our theme to limit the amount of chips shown in the Autocomplete component when the user chooses the is any of operator:

I'm doing this via the InputComponentProps in the valueInputProps for filterFormProps:

<DataGridPro
        {...data}
        slots={{ toolbar: GridToolbar }}
        slotProps={{
          filterPanel: {
            filterFormProps: {
              logicOperatorInputProps: {
                variant: 'outlined',
              },
              columnInputProps: {
                variant: 'outlined',
              },
              operatorInputProps: {
                variant: 'outlined',
              },
              valueInputProps: {
                InputComponentProps: {
                  limitTags: 1,
                  variant: 'outlined',
                  InputLabelProps: {
                    shrink: false,
                  },
                },
              },
            },
          },
        }}
      />

However, it appears that the props I provided are being passed to any component that may appear in the value column in the filter panel. This causes a console warning:

Warning: React does not recognize the limitTags prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase limittags instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Is there a way to specify which component to pass the props to? Specifically, in the theme when defining default props?

Example (without the theme) here: https://stackblitz.com/edit/react-9gg8tm?file=Demo.tsx

Search keywords:

[michelengelen]

Hey @StylesTrip ... I think the best option would be to just apply this to the operator you want it to be on, which is the isAnyOf string operator, right?

Here is some example code for this:

const columns = React.useMemo(
  () =>
    data.columns.map((col) => {
      if (col.field === 'name') {
        return {
          ...col,
          filterOperators: getGridStringOperators()
            .filter((operator) => operator.value === 'isAnyOf')
            .map((operator) =>
              operator.value === 'isAnyOf'
                ? {
                    ...operator,
                    InputComponentProps: {
                      ...(operator.InputComponentProps || {}),
                      limitTags: 1,
                    },
                  }
                : operator,
            ),
        };
      }
      return col;
    }),
  [data.columns],
);

I am only applying this to the 'name' column here, but you could just as well apply it to every col that is of type string.

Does this help you?

[StylesTrip]

Thanks for the reply, @michelengelen! I was hoping for a way to do it in the theme as defaultProps as we provide a theme for our frontend projects to use.

If there isn't a clean way to do it there, then this can be a workaround that I can share with those teams.

[michelengelen]

@cherniavskii can we provide a more generalistic approach for this?

[cherniavskii]

can we provide a more generalistic approach for this?

No, I don't think so.
This is the limitation of the slotProps pattern.

[michelengelen]

OK, in that case we are sorry, but this seems to be the only way right now to apply this specific prop. I will close this issue now, but feel free to reopen when you have additional related questions. Or open a new issue when you encounter other problems!
Thanks! 🙇🏼

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @StylesTrip?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.