[material-ui][TextField] When as a Select, it shows an empty menu when items get removed dynamically

[nawaaz-kapstan]

Steps to reproduce

Link to live example: https://playcode.io/1881049

Steps:

1. Click the Mock API button. This will mock a real API call, setting the isLoading state true.
2. Open the dropdown list. The dropdown will show the Loading... text.
3. Once the loading is complete, all the list items get removed, showing an empty dropdown popover.

Code

import React from 'react';
import {TextField, MenuItem, Button, Box} from '@mui/material'

export function App(props) {
  const [list, setList] = React.useState([
    'Apple',
    'Banana'
  ])
  const [selectedItem, setSelectedItem] = React.useState('Apple')
  const [isLoading, setIsLoading] = React.useState(false)

  const onChange = (e) => {
    setSelectedItem(e.target.value)
  }

  const mockAPICall = () => {
    setIsLoading(true)
    setTimeout(() => {
      setIsLoading(false)
      setList([])
    }, 3000)
  }
  

  return (
    <div className='App'>
      <TextField select value={selectedItem} value={selectedItem} onChange={onChange} sx={{width: 100}}>
        {isLoading ? <MenuItem>Loading...</MenuItem> : 
          list.map((i) => <MenuItem key={i} value={i}>{i}</MenuItem>)
        }
      </TextField>
      <Box mt={3}>
        <Button color="primary" variant="contained" onClick={mockAPICall}>Mock API</Button>
      </Box>
    </div>
  );
}

Demo

Screen.Recording.2024-05-23.at.12.58.30.PM.mp4

Current behavior

The dropdown does not disappear after the list items become empty.
Upon inspection, it was discovered that the DOM retained the ul element even after the list items were removed.

Expected behavior

With the removal of all the list items, the dropdown list shown also disappear. Technically, it should clear the ul element from the DOM.

Context

The aim is to show the dropdown in a loading state until the API gets loaded. If there is not data, then the dropdown should become empty.

Your environment

npx @mui/envinfo

 System:
    OS: macOS 14.5
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.5 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.14.0 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.210
    Edge: 125.0.2535.51
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.18 
    @mui/icons-material: ^5.15.15 => 5.15.15 
    @mui/material: ^5.15.18 => 5.15.18 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system: ^5.15.11 => 5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-date-pickers: ^6.19.9 => 6.19.9 
    @types/react: ^17.0.0 => 17.0.45 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.6.3 => 4.9.5 

Browser

Google Chome
Version 124.0.6367.210 (Official Build) (arm64)

Search keywords: textfield, select, empty, menu, dropdown

[ZeeshanTamboli]

I tried making the <TextField select /> a controlled select as shown in this StackBlitz example, but it doesn't work perfectly (there is a slight glitch when menu is closed). Does it work for you? We want to remove not only the Menu List (ul HTML element) but the entire Menu, which inherits from Popover, and ultimately from the Modal component.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.