[Select] Improve categories support

[nicks78]

Edit @oliviertassinari

bug 1

• description: A click on the ListSubheader shouldn't trigger the selection.
• reproduction: https://material-ui.com/components/selects/#grouping

bug 2

• description: Only one ListSubheader should be visible when scrolling
• reproduction: https://codesandbox.io/s/create-react-app-5z42i?fontsize=14

[oliviertassinari]

@nicks78 Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[nicks78]

https://codesandbox.io/s/create-react-app-5z42i?fontsize=14

This is the reproduction with the error

[oliviertassinari]

@nicks78 Thank you for the reproduction. You can't do that, the Select requires a flat array. See #14943 for the issue that prevents it.

[nicks78]

@oliviertassinari , I take the same exemple like it is in the library and there is still the same error :
https://material-ui.com/components/selects/
https://codesandbox.io/s/create-react-app-5z42i?fontsize=14

[oliviertassinari]

@nicks78 Thank you for the codesandbox.

[embeddedt]

Any progress on bug 1 here? Anything I can do to help? This is a bit of a dealbreaker for the Select component as I obviously don't want my headers being selected. The native Select option seems to handle this properly.

My current workaround is to add the following to my CSS stylesheet, but I know it's an ugly hack:

.MuiListSubheader-root {
    pointer-events: none;
}

Perhaps putting a boolean prop on the ListSubheader that conditionally adds pointer-events: none would be good enough?

[oliviertassinari]

For a future iteration, let's not forget about the learnings of #19574.

[petermikitsh]

As mentioned in #20448:

There is an accessibility bug when using ListSubheader in a Select. When the first child of a Select component is ListSubheader, you must press tab before up/down arrow key functionality works. Codesandbox repo.

[wseagar]

Are there any workarounds for issue #2?

[embeddedt]

@wseagar I'm not sure if adding position: sticky to a ListSubheader would work or not; you could give that a shot.

[wseagar]

Thanks @embeddedt

For the moment I've used the native prop on the select with the native elements for the options

This solves the above 2 issues for my use case

(this example from the docs)

<Select native defaultValue="" id="grouped-native-select">
          <option aria-label="None" value="" />
          <optgroup label="Category 1">
            <option value={1}>Option 1</option>
            <option value={2}>Option 2</option>
          </optgroup>
          <optgroup label="Category 2">
            <option value={3}>Option 3</option>
            <option value={4}>Option 4</option>
          </optgroup>
        </Select>

[Klynger]

I found a better solution to this problem (It only solves if you have just one ListSubheader). In the select component, you can pass the MenuProps object, and inside this object, you can pass the MenuListProps object which is the one that renders the List component that has a prop called subheader (which is the "right way" to render a ListSubHeader component).

So, you just have to do this:

import * as React from 'react'
import MenuItem from '@material-ui/core/MenuItem'
import ListSubheader from '@material-ui/core/ListSubheader'
import Select, { SelectProps } from '@material-ui/core/Select'

interface Props {
  subheaderText: string
}

function MySelect(props: Props) {
  const { subheaderText } = props

  const menuProps: SelectProps['MenuProps'] = React.useMemo(
    () => ({
      TransitionProps: { timeout: 0 },
      MenuListProps: {
        subheader: <ListSubheader component="div">{subheaderText}</ListSubheader>,
      },
    }),
    [subheaderText]
  )

  return (
    <Select MenuProps={menuProps}>
      <MenuItem>0</MenuItem>
      <MenuItem>1</MenuItem>
      <MenuItem>2</MenuItem>
    </Select>
  )
}

This way nothing will happen if the user clicks in the subheader and also the Select will position the Popover in the right position

[v0lume]

is it a problem to add one additional prop and one line of handler? facing the same issue and don't understand why it's not implemented for almost 2 years

[croraf]

I was checking ListSubheader for some time, but couldn't manage to disable selection.

Seems to me like an overkill to have a separate Component for the grouping menu item (ListSubheader), or at least seems like it should reuse much of the MenuItem functionality.

A workaround that I used to fix the select issue on the ListSubheader is to use the simple MenuItem component, set "disabled" on it and styled it.

Because disabled takes precedence over the custom style, I had to use !important on opacity.

category: {
  fontStyle: 'italic',
  fontWeight: 'bold',
  margin: '5px 0px',
  opacity: '1 !important',
}

...

<Select defaultValue="" id="grouped-select">
  <MenuItem disabled className={classes.category}>Category 1</MenuItem>
  <MenuItem value={1}>Option 1</MenuItem>
  <MenuItem value={2}>Option 2</MenuItem>
  <MenuItem disabled className={classes.category}>Category 2</MenuItem>
  <MenuItem value={3}>Option 3</MenuItem>
</Select>

[croraf]

I tried it on latest docs and it works ok. One suggestion, to show a demo example in docs where the "sticky" list subheader behavior can be noticed.

https://next--material-ui.netlify.app/components/selects/#grouping

[Karol-Perec]

Ad 1. Stopping propagation worked for me.
<ListSubheader onClickCapture={(e) => e.stopPropagation()}> {title} </ListSubheader>