[question] How to theme the singleSelect options dropdown

[ak-mid]

Order ID 💳

35878

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I try to theme the singleSelect option dropdown. My goal is to add an icon in front of all menu items. Therefore I did fork the CustomInputComponent example from the docs and replaced the Rating component with a Select component.

My problem currently is that the dropdown menu items are not selectable (handleFilterChange is not triggered at all) and that the dropdown does close right after clicking on it. The reason is probably that inputRef is not set correctly, but I'm totally stuck at that point. Any help would be greatly appreciated.

I created a codesandbox with the current state of my work:

https://codesandbox.io/s/custominputcomponent-material-demo-forked-w8l935?file=/demo.js:1454-1462

Your environment 🌎

`npx @mui/envinfo`

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

[alexfauquette]

Hi, the problem is that you try to use the due to a conflict with the filter panel click-away #1314

So your component should be

<Selecte native>
  <option>...</option>
  <option>...</option>
  ...
</Select>

You can find more details and follows progress in #4127

[ak-mid]

I can't use the native element and icons at the same time or am I wrong?

In my use case I got e.g. a column called status and via renderCell I modify the cells in that column so the cells only return icons for a corresponding status.

Inside of the single select filter for that status column I only got the status text, so there is no reference between the grid cell status icon and the filter status select option.

I would expect that there is a callback to format the filter values like we have for cells (renderCell) or for headers (renderHeader ).

[alexfauquette]

Yes, when singlSelect will support non-native Select having a renderValueOption callback could be a nice to have.

[alexfauquette]

@ak-mid The PR #4361 has been merged, so the next release should allow you to use the MUI <Select /> in the filter panel

[ak-mid]

@alexfauquette Thanks for the update. I'll check it out after a new version is released.

[m4theushw]

The latest release includes #4361. But you still can't provide custom options because the option component is hardcoded to be MenuItem. To close this issue, we only need to add an renderOptionValue property to the singleSelect column definition. Suggestion from @alexfauquette in #4305 (comment)

[ak-mid]

@m4theushw Thanks for the update. I updated to 5.10.0 and I got the following behavior:
The icons and the option strings show up in the select dropdown but only the icon is visible as selected filter value.

My filterOperator InputComponent return this Select component:

  <Select
      id={item.columnField}
      label={apiRef.current.getLocaleText('filterPanelInputLabel')}
      placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
      value={item.value}
      onChange={handleFilterChange}
      variant="standard"
      inputRef={focusElementRef}
    >
      {renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)}
    </Select>

and the renderSingleSelectOptions callback:

const renderSingleSelectOptions = (currentColum, api) => {
    const { valueOptions, valueFormatter, field } = currentColum;
    return valueOptions.map(option => 
      <MenuItem value={option} key={option}>
        <ListItemIcon>
          {renderDeviceStatusIcon(option)}
        </ListItemIcon>
        <ListItemText>
          {valueFormatter({ value: option, field, api })}
        </ListItemText>
      </MenuItem>);
  };

Should that already work or am I missing something?

[alexfauquette]

Without a full reproduction, it is hard to tell
I tried to add the code snippet you provided to the previous codesandbox and it works. I did not took time to check how to fix CSS

https://codesandbox.io/s/custominputcomponent-material-demo-forked-3yl4dh?file=/demo.js

[ak-mid]

@alexfauquette Thanks for investing the time to update the codesandbox!
The CSS workaround from this issue #4125 was the reason why the selected filter value didn't show up. I updated the styles and now it's working.

I also did add some CSS to fix the filter panel styles and updated the codesandbox in case somebody is also looking for a solution:
https://codesandbox.io/s/custominputcomponent-material-demo-forked-cd7itj?file=/demo.js

I still got an issue that there is no default None filter value like the other native filters have. Seems like valueOptions array doesn't include it.

On the whole the effort to theme the filter value is IMO too complicated compared to what a user tries to accomplish.
A future easier solution would be very much appreciated.

[alexfauquette]

There is not empty option because you did not set them

The default input for singleSelect filter add an empty string before the value options
https://github.com/alexfauquette/material-ui-x/blob/quick-filter/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx#L19:L19

This in line 24 of your codeSandbox should fix it

-return valueOptions.map((option) => (
+return ["", ...valueOptions].map((option) => (

https://codesandbox.io/s/custominputcomponent-material-demo-forked-r131k8?file=/demo.js

[ak-mid]

Somehow I thought the empty option is set way earlier.
I also needed to add value={item.value || ''} to check for undefined values, because else I get A component is changing an uncontrolled input to be controlledwarnings in the console.

And I needed to add shrink to my InputLabel to 100% mimic a default filter label behavior.

I updated the codesandbox one more time with the complete solution

https://codesandbox.io/s/custominputcomponent-material-demo-forked-jse81u?file=/demo.js