MenuItem grouping Still not available

[M4urici0GM]

I saw some issues opened in nov. 2017, and today it's still not available.
When it will ?

[oliviertassinari]

I saw some issues opened in nov. 2017

@M4urici0GM Could you link it, or even better follow our issue template? What are you looking for? I'm clueless. Are interested in something like this?

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import ListSubheader from '@material-ui/core/ListSubheader';
import MenuItem from '@material-ui/core/MenuItem';
import Divider from '@material-ui/core/Divider';

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  function handleClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <ListSubheader>
          Group 1
        </ListSubheader>
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account………</MenuItem>
        <Divider />
        <ListSubheader>
          Group 2
        </ListSubheader>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

[M4urici0GM]

Im looking for something based on that:

There's category, and sub-categories. Basically i want split them in groups, similar to the print.
I was trying to use TextField with select prop,
Obviously it wont work since jsx do not allow it.

<TextField select variant="outlined" value={fetchedProduct.category} onChange={(e) => console.log(e.target.value)} value={fetchedProduct.category} margin="dense" helperText="Escolha a categoria" label="Categoria do produto." color="primary" className={classes.textField}>
    {categories.map((category, index) => (
        <MenuItem className={classes.category} key={subCategory.id} id={subCategory.id}>{subCategory.name_categoria}</MenuItem>
            category.sub_category.map(subCategory => (
            <MenuItem className={classes.subCategory} key={subCategory.id} id={subCategory.id}>{subCategory.name_categoria}</MenuItem>
        ))
    ))}
</TextField>

[oliviertassinari]

It should be supported. You can either use the native select mode or keep use the non native variant (your example) while keeping the children in flat array.

[oliviertassinari]

Let's move the discussion to #2671