[Select] The select menu isn't hidden on suspended.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- 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:
- Make a component using
Selectthat changes the parent's state. - Call a function that throws
Promiseon the parent component. - 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and the SelectInput update handler described in the issue context. Trace the interaction when the parent suspends, then add regression coverage showing that the selection menu items are hidden during suspension and verify the reproduction no longer occurs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100