[Autocomplete] MuiAutocomplete listbox is no longer a <ul> element

[Nyazuki]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/embed/g6yktw?module=/src/Demo.tsx&fontsize=12
This is the Combo Box example on the doc for Autocomplete https://mui.com/material-ui/react-autocomplete/#combo-box

Steps:

1. Open the inspector, check the dropdown menu, you will see the listbox is a div element.

Current behavior

The default listbox is a div element in V6.1.5
e.g.

<div
  role="listbox"
  id="my-search-input-listbox"
  aria-labelledby="my-search-input-label"
  class="MuiAutocomplete-listbox"
>
  <li>
    <div
      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky MuiAutocomplete-groupLabel"
    >
      Group 1
    </div>
    <ul class="MuiAutocomplete-groupUl">
      <li
        tabindex="-1"
        role="option"
        id="my-search-input-option-0"
        data-option-index="0"
        aria-disabled="false"
        aria-selected="false"
        class="MuiAutocomplete-option Mui-focused"
      >
        Data 1
      </li>
    </ul>
  </li>
</div>

Expected behavior

The default listbox is a ul element in V5
e.g.

<ul
  class='MuiAutocomplete-listbox'
  role='listbox'
  id='my-search-input-listbox'
  aria-labelledby='my-search-input-label'
>
  <li>
    <div class='MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky MuiAutocomplete-groupLabel'>
      Group 1
    </div>
    <ul class='MuiAutocomplete-groupUl'>
      <li
        tabindex='-1'
        role='option'
        id='my-search-input-option-0'
        data-option-index='0'
        aria-disabled='false'
        aria-selected='false'
        class='MuiAutocomplete-option Mui-focused'
      >
        Data 1
      </li>
    </ul>
  </li>
</ul>

Context

At first, I noticed there are some styling(spacing) issues after upgraded from V5 to V6 for my Autocomplete component.
After inspection, I noticed that there is a style previously applied in V5 which is -
ul ul { list-style-type: circle; margin-block-start: 0px; margin-block-end: 0px; }
However, whether or not this style still exist in V6 it will not be applied to the nested ul(MuiAutocomplete-groupUl), because now the listbox is a div element instead of ul element. I will need to override the margin(to 0px) manually to make it looks the same as in V5.

I am not sure if this is bug or an undocumented change from V5 -> V6, or maybe it has documented some where else than the migration doc for V6 which I did not see.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 13.3.1
  Binaries:
    Node: 20.11.1 - /usr/local/opt/node@20/bin/node
    npm: 10.9.0 - /usr/local/lib/node_modules/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.71
    Edge: 130.0.2849.56
    Safari: 16.4
  npmPackages:
    @mui/core-downloads-tracker:  6.1.5 
    @mui/material: ^6.1.5 => 6.1.5 
    @mui/private-theming:  6.1.5 
    @mui/styled-engine:  6.1.5 
    @mui/styled-engine-sc: ^6.1.5 => 6.1.5 
    @mui/system:  6.1.5 
    @mui/types:  7.2.18 
    @mui/utils:  6.1.5 
    @mui/x-date-pickers: ^7.21.0 => 7.22.0 
    @mui/x-internals:  7.21.0 
    @types/react: ^18.2.73 => 18.3.12 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    styled-components: ^6.1.13 => 6.1.13 
    typescript: ^5.4.3 => 5.6.3

Search keywords: autocomplete grouped listbox ul div

[sai6855]

@DiegoAndai Now that AutoCompleteListbox is being used as elementType and not ul

material-ui/packages/mui-material/src/Autocomplete/Autocomplete.js

Line 560 in e26b15a

elementType: AutocompleteListbox,

do you think, just changing type to ul from div AutocompleteListbox would fix the issue? or do you see further complexity?

material-ui/packages/mui-material/src/Autocomplete/Autocomplete.js

Line 329 in e26b15a

const AutocompleteListbox = styled('div', {

[masonlouchart]

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

It seems to limit the possibilities to 3 types of parents.

Another source seems to be less strict:

[...] If its parent element is an ol, ul, or menu element, [...] Otherwise, [...]
https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element

However, I checked the HTML below with the W3C validator: https://validator.w3.org/nu/#textarea

<div><li>foo</li></div>

It does not seem allowed to have a li element as a direct child of a div.

[DiegoAndai]

Hey @Nyazuki, thanks for the report, and sorry for the late reply.

@sai6855 Yes, I think you're correct. I'll open a PR with these changes.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Nyazuki How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.