`Select` overrides `selected` prop on children items

[MonstraG]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-mpdrbwbo?file=Demo.tsx, look at BasicSelect
2. open select

Current behavior

Select passes selected based on value and ignores existing value of selected of MenuItem.

Expected behavior

Select passes selected based on value, but only if it's undefined.

Context

This might be sort of X-Y problem.

The stackblitz link contains another element - ComplicatedSelect. This more closely resembles select from my app.

I'm trying to implement Select all option, and the only thing that is blocking me is selected not working.

With selected={selectAllValue !== 'none'} I expect it to be hightlighted, whenever at least one element is selected, but it is never selected, because it's not in value prop.

I can put the value of the Select all checkbox in the value array on the fly, but that would also require adding magical -1 in renderValue which feels brittle, but most imporantly, it results in onChange breaking becase it will not be in event.target.value after click.

Your environment

npx @mui/envinfo

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

Search keywords: select selected MenuItem overrides undefined

[DiegoAndai]

Hey @MonstraG! thanks for reaching out.

This is expected, as we need to override the selected property for the Select component to work. I don't think we can change this with the current implementation.

Some workarounds I can think of:

• Implement the highlight and apply it manually
• or, Include the "Select all" option in value (and possible remove it when submitting or using the value)
• or, Maybe it's a good thing that "Select all" does not look like the other options, as it's a different thing.

I hope this helps, let me know.

[MonstraG]

I did not try it yet, but on the surface it seems that it will be enough to do:

material-ui/packages/mui-material/src/Select/SelectInput.js

Line 412 in 4d1bb85

selected,

      role: 'option',
-     selected,
+     selected: child.props.selected ?? selected,
      value: undefined, // The value is most likely not a valid HTML attribute.

In my current implementation I went with workaround (1) but that involves useTheme() and bgcolor: alpha(primary.main, 0.08), is there a better way to get "selected color"? Although selected color background doesn't mean it's "selected", including the aria-properties that I just miss.

I said how (2) doesn't work in the original post.

And for (3) - I then might need #26356 which is not possible it seems.

I can think of (4) - re-implementing Select with just Input and Menu myself, but for that it would be nice to have some base to work with like "example Select re-implementation for more advanced uses" where Input already hooked to a menu made to look like the original Select.

[DiegoAndai]

on the surface it seems that it will be enough to do:

Yes, that would do it. However:

• it might introduce unexpected changes to other users
• it would open the gate for the selected states to get desynchronized with the value state
• I'm not sure it would be correct to have a selected option that is not in the value state, although that might be for the user to decide

What do you think about allowing users to provide the selected state to options @aarongarciah?