[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