[Select] The select menu isn't hidden on suspended.

[SeokminHong]

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://stackblitz.com/edit/vitejs-vite-9tpcrc?file=src%2FApp.tsx

Steps:

1. Make a component using Select that changes the parent's state.
2. Call a function that throws Promise on the parent component.
3. Wrap the parent component with Suspense.

Current behavior 😯

The selection menu items aren't hidden on suspended.

https://github.com/mui/material-ui/assets/11614766/b87f5dd9-05df-4941-a93c-9dd97084df4f

Expected behavior 🤔

The selection menu items should be hidden while the parent component is suspended.

Context 🔦

When a selection menu is selected, the update handler of SelectInput is called. It calls the setOpenState function to rerender, but the component can't be updated because of the suspension.

I guess it is related to facebook/react#25677.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.2.1
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.16.0/bin/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: Not Found
    Safari: 16.3
  

[michaldudak]

Yes, it seems it's caused by the React issue you mentioned. You can work around it by disabling the portal in the Select:

<Select
  MenuProps={{ disablePortal: true }}
>

https://stackblitz.com/edit/vitejs-vite-meekgt?file=src%2FApp.tsx

[SeokminHong]

Thanks, but I think the state is broken after changing the Select component's state twice a row.

https://github.com/mui/material-ui/assets/11614766/c51bc911-3c00-4c38-948e-2b2db217f3bd

I think the best practice is using the useTransition hook.

https://github.com/mui/material-ui/assets/11614766/c34e2cd7-1351-4448-aa16-03cd01c0416c

https://stackblitz.com/edit/vitejs-vite-9tpcrc?file=src%2FApp.tsx

I think it'll be good to make a document for Select or Popover, components using Portal.

[himself65]

I faced a similar issue when using Portal. My solution is to wrap the setClose into a startTransition

https://github.com/toeverything/AFFiNE/commit/fb9bd21820f034f7f8df843ac4834dc9424c4455