[material-ui][Autocomplete] The options list is added to the DOM even when there are no options, causing style problems

[DSK9012]

Search keywords

Autocomplete, freeSolo, empty-options-list

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/practical-meadow-yq7hs5

Steps:

1. Click on freeSolo Input Box
2. Notice the red border below to the input field which actually is a paper container for options list.

Current behavior

When there are no options for freeSolo Autocomplete input box, The list dropdown is being render on the UI. This becomes issue when I use some custom styles for that root paper element. Please check below image.

Expected behavior

When there are no options available for freeSolo input, We shouldn't render/mount the options list.

Context

We are maintaining our own theme where we applied some custom styles to this options list in Autocomplete component. So when there are no options available for Autocomplete freeSolo input, the empty options list is getting rendered unnecessarily with the custom styles. So when user is trying to input something by clicking on input field and he shows these styles without making any sense.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

System:
OS: macOS 14.1.1

Binaries:
Node: 14.21.1 - ~/.nvm/versions/node/v14.21.1/bin/node
npm: 6.14.17 - ~/.nvm/versions/node/v14.21.1/bin/npm
pnpm: Not Found

Browsers:
Chrome: 121.0.6167.85
Edge: 121.0.2277.83
Safari: 17.1

npmPackages:
@emotion/react: ^11.10.4 => 11.11.1
@emotion/styled: ^11.10.4 => 11.11.0
@mui/base: 5.0.0-beta.17
@mui/core-downloads-tracker: 5.14.11
@mui/icons-material: ^5.11.11 => 5.14.11
@mui/material: ^5.10.7 => 5.14.11
@mui/private-theming: 5.14.11
@mui/styled-engine: 5.14.11
@mui/system: 5.14.11
@mui/types: 7.2.4
@mui/utils: 5.14.11
@mui/x-data-grid: ^5.17.11 => 5.17.26
@mui/x-date-pickers: ^5.0.19 => 5.0.20
@types/react: ^18.0.21 => 18.2.22
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.8.4 => 4.9.5

[DSK9012]

I would like to work on this issue. Please let me know.

[ZeeshanTamboli]

Seems like a bug. The Popper appears in the DOM even when there are no options in free solo mode. This might have been done to handle the loading state with the loading prop when options are still being fetched and also when we want to show "no options" when it is not in free solo mode.

@DSK9012 You can work on it. Thanks.

[rakeshmusturi]

Can i pick this up?

[ZeeshanTamboli]

@rakeshmusturi Feel free to!

[rakeshmusturi]

#41300 PR for the above issue, please review and check if anything has to be done from my end