[data grid] Filter panel - Props doesn't passed to selects

[YosefSchwartz]

Steps to reproduce

Steps:

1. Open this link to live example: Link to minimal example
2. Click on filters button

Current behavior

The filter item render the default drop-down icon (ArrowDropDownIcon)

Expected behavior

The filter item should be rendering the drop-down icon that passed via the props (ArrowDropDownCircleIcon)

Context

Since operatorInputProps is mentioned as "Props passed to the logic operator input component" in operatorInputProps docs, I expected that all valid <Select/> props should be passed to the input component (Select props), like it works with variant and size.

I tried to change the drop-down icon, but it doesn't.

Thanks!

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: select filter icon

[michelengelen]

This will get fixed in the new major release with #16394 ... I am not sure if we can support this with a workaround atm. The problem is that the props are being spread on top of a FormControl component and not the actual Select component.

I'll add this to the board as it is clearly a bug we should fix for the current stable version! 👍🏼

[YosefSchwartz]

Thanks!
Just added that it occurred also in the columns select.

[romgrk]

For now I would recommend implementing the baseSelect slot yourself if you need to customize it:

function CustomSelect(props) { ... }

<DataGrid
  slots={{ baseSelect: CustomSelect }}
/>

[YosefSchwartz]

For now I would recommend implementing the baseSelect slot yourself if you need to customize it:

function CustomSelect(props) { ... }

<DataGrid
slots={{ baseSelect: CustomSelect }}
/>

@romgrk
I tried it now, but it's not working.
Did you succeed?

-------- EDIT -----

I tried to pass through the slotProps the icon to the baseSelect, and it didn't work.
Now I tried to pass the whole components with the new icon and it works!

Thanks!

[romgrk]

I don't think this is a bug, we can't be both design-system agnostic and allow passing any material-ui prop to our base components. I would recommend directing users to the solution above for customization.