[material-ui][Speed Dial] onClose is called immediately after onOpen on first interaction
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: (required)
https://mui.com/material-ui/react-speed-dial/
Steps:
- Unfocus browser window
- Click on the button
- It starts to open an closes immediately
Current behavior
On first interaction with the speed dial button, the onClose is triggered immediately after onOpen both called with 'toggle' . The speed dial menu remains closed after the click. Also, reproduced on iPhone 12 Pro Max, but couldn't reproduce on iPhone 15 Pro Max.
Expected behavior
Consistent behaviour, click to open the speed dial menu when it was closed, and close if it was open.
Context
This happens only with controlled state without mouse over action, mobile browser or responsive view in the browser.
The workaround is to pass onClick handler to FabProps and open the menu from there.
Your environment
npx @mui/envinfo
Chrome 120.0.6099.216 (Official Build) (arm64)
Arc 120.0.6099.216 (Official Build) (arm64)
Latest Safari on IOS 17.1.2
System:
OS: macOS 14.1.1
Binaries:
Node: 20.10.0 - /usr/local/bin/node
npm: 9.6.6 - /opt/homebrew/bin/npm
pnpm: 7.22.0 - ~/.npm-packages/bin/pnpm
Browsers:
Chrome: 120.0.6099.216
Edge: Not Found
Safari: 17.1
npmPackages:
@emotion/react: 11.11.3 => 11.11.3
@emotion/styled: 11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.31
@mui/core-downloads-tracker: 5.15.4
@mui/icons-material: 5.15.4 => 5.15.4
@mui/lab: ^5.0.0-alpha.160 => 5.0.0-alpha.160
@mui/material: 5.15.4 => 5.15.4
@mui/private-theming: 5.15.4
@mui/styled-engine: 5.15.4
@mui/system: ^5.15.4 => 5.15.4
@mui/types: 7.2.13
@mui/utils: 5.15.4
@mui/x-date-pickers: ^6.19.0 => 6.19.0
@types/react: 18.2.47 => 18.2.47
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.3.3 => 5.3.3
Search keywords: Speed Dial
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 Material UI Speed Dial live example and reproduce the first-interaction sequence in a controlled-state setup, including the FabProps workaround. Trace the Speed Dial open and close entry points and verify that clicking a closed menu opens it without an immediate onClose, while clicking an open menu closes it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100