Autocomplete renderGroup

[el-j]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

if renderGroup is added for rendering a specific styled groupLabel
the list just returns the GroupLabels and no options anymore:

<Autocomplete
      id="requirement"
      options={allLogicProperties[alertType]}
      fullWidth
      renderInput={(params) => <TextField {...params} label={'label'} />}
      groupBy={(option) => option.type}
      renderOption={(props, option:IHostProps, { selected }) => {
          let temp:IHostProps = option
        return   <ListItem {...props} key={option.value} value={option.value}>
              {option.label}
            </ListItem>
      }}
      renderGroup={(params)=> <li>{params.group}</li>}
    />

Expected behavior 🤔

<Autocomplete
      id="requirement"
      options={allLogicProperties[alertType]}
      fullWidth
      renderInput={(params) => <TextField {...params} label={'label'} />}
      groupBy={(option) => option.type}
      renderOption={(props, option:IHostProps, { selected }) => {
          let temp:IHostProps = option
        return   <ListItem {...props} key={option.value} value={option.value}>
              {option.label}
            </ListItem>
      }}
      renderGroup={(params)=> <li>{params.group}</li>}
    />

Steps to reproduce 🕹

Steps:

1. add autocomplete component
2. add groupedBy
3. add renderGroup
4. options will be missing in the dropdown

use codesandbox from example:
https://codesandbox.io/s/fseoi6?file=/demo.tsx
add:

renderGroup={(p)=><li>{p.group}</li>}

Context 🔦

Finally the group.label component should be rendered with an Icon infront:

with something like:

renderGroup={(group)=><ListSubheader
         key={group.key}
         component={() => (
           <ListSubheader sx={{ display: "flex" }}>
            <Stack
              direction={"row"}
              spacing={2}
              alignItems={"center"}
              height={48}
            >
              <Icon iconName={group.iconName} fontSize={"small"} />
              <Body2Typo>{t(`${group.label}`)}</Body2Typo>
            </Stack>
           </ListSubheader>
)} />
}

Your environment 🌎

@mui/material 5.10.1

[michaldudak]

When providing a custom renderGroup, you are responsible for rendering the group's children.
For example:

renderGroup={(params) => 
  (<li>{params.group}<ul>{params.children}</ul></li>)
}

The docs don't state this clearly. I'll make sure they are updated.