mui
SpeedDial cannot have children other than SpeedDialAction
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/admiring-moore-8ftlq3?file=/src/App.tsx
Steps:
- Hover over SpeedDial and see no menu is shown
- Comment out the two spans inside SpeedDial
- Things work as expected
Current behavior 😯
Cannot nest anything inside SpeedDial as it breaks SpeedDialActions
Expected behavior 🤔
You should be able to nest other things inside SpeedDial around the SpeedDialActions.
Context 🔦
The plan was to customise the SpeedDial by putting the SpeedDialActions inside a <Draggable> component, so the user can rearrange the order.
Your environment 🌎
npx @mui/envinfo
Browser Chrome
System:
OS: Windows 10 10.0.19042
Binaries:
Node: 19.3.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.15.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.58)
npmPackages:
@emotion/react: ^11.10.6 => 11.10.6
@emotion/styled: ^11.10.6 => 11.10.6
@mui/base: 5.0.0-alpha.126
@mui/core-downloads-tracker: 5.12.1
@mui/icons-material: ^5.11.16 => 5.11.16
@mui/material: ^5.12.1 => 5.12.1
@mui/private-theming: 5.12.0
@mui/styled-engine: 5.12.0
@mui/system: 5.12.1
@mui/types: 7.2.4
@mui/utils: 5.12.0
@types/react: ^18.0.28 => 18.0.28
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.9.5 => 4.9.5
Inspecting the span you see this:
<span fabprops="[object Object]" delay="30" tooltipplacement="top" id="SpeedDialbasicexample-action-0">
Just curious: if you need to change the order of the SpeedDialAction(s) wouldn't it be easier to just change the order of the elements in the actions array in your live example? And if you do need to style the SpeedDialAction you can customize it anyway, similar like how it's done in this example in the docs for the SpeedDial: https://mui.com/material-ui/react-speed-dial/#playground
Just curious: if you need to change the order of the SpeedDialAction(s) wouldn't it be easier to just change the order of the elements in the actions array in your live example? And if you do need to style the SpeedDialAction you can customize it anyway, similar like how it's done in this example in the docs for the SpeedDial: https://mui.com/material-ui/react-speed-dial/#playground
No. The drag library's usually take arrays of components.
The SpeedDial implementation needs a rewrite; it relies on cloning only and restricts which elements are allowed in, which is quite inflexible. My requirement is to consume SpeedDialActions and SpeedDial in different components, which is currently impossible. The SpeedDialAction implementation uses quite a big pile of MUI components, such as Tooltip, which are large components per se. A separation is required because those additional components are only necessary when the component expands; a separation allows tree-shaking.
We're gradually removing the usage of cloneElement across the library and relying on context for communication between components. With it, it'll be possible to place children on any level below the parent (and even wrap them in custom components), as it's currently done in Base UI's Select or Menu.
