mui / mui/material-ui

[material-ui][Speed Dial] onClose is called immediately after onOpen on first interaction

Open
#40,550 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

docs scope: speed dial type: bug
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:

  1. Unfocus browser window
  2. Click on the button
  3. It starts to open an closes immediately
    Screen Recording 2024-01-11 at 20 55 08
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.