[Autocomplete] Adding a transition to the StyledPopper inside the Virtualization code sample causes the options to be unmounted before the transition has ended

[zjsng]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/72j3jc?file=/demo.tsx

Steps:

1. Go to the StyledPopper component.
2. Change it into this code sample:

   const StyledPopper = (props) => {
   const {children, ...otherProps} = props as PopperProps;
   return (
   <Popper {...otherProps} transition>
     {({TransitionProps}) => (
       <Grow {...TransitionProps} timeout="auto">
         {children as React.ReactElement}
       </Grow>
     )}
   </Popper>
   );
   }

3. Add the missing imports

Current behavior 😯

Currently, when the dropdown is closed, the text "No options" appears for a split second. The ListboxComponent gets unmounted and replaced with "No options".

Expected behavior 🤔

The virtualized options should be showing at least until the transition ends before being unmounted.

Context 🔦

I'm trying to virtualize my dropdown fields as they sometimes contain over a thousand options. Adding a transition to the popper causes the given issue.

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.22621 Binaries: Node: 16.17.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.22621.1265.0), Chromium (110.0.1587.49) npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.110 @mui/core-downloads-tracker: 5.11.0 @mui/icons-material: ^5.10.6 => 5.11.0 @mui/material: ^5.10.12 => 5.11.0 @mui/private-theming: 5.11.0 @mui/styled-engine: 5.11.0 @mui/system: 5.11.0 @mui/types: 7.2.3 @mui/utils: 5.11.0 @mui/x-date-pickers: ^5.0.9 => 5.0.11 @types/react: ^18.0.0 => 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.4.2 => 4.9.4 ```

I am using Chrome.

[michaldudak]

Thanks for the report. It looks like caused by these lines in useAutocomplete: https://github.com/mui/material-ui/blob/da60165a446928263ce33da581ff5d89d3c54d8c/packages/mui-base/src/useAutocomplete/useAutocomplete.js#LL211-L231

It was likely introduced to prevent running the filtering logic right after the component is mounted. The side effect is that the option list gets cleared right after popupOpen turns false. It could be changed to wait only for the first opening to run the logic.

[iyinchao]

+1 experienced the same issue. @michaldudak Can we save a copy of filtered options in ref, and use the it when popupOpen is false?

[michaldudak]

@aarongarciah, do you have the bandwidth to take this over or oversee community contributions?

[aarongarciah]

@michaldudak we probably won't prioritize this in a while but happy to accept contributions.