Can I stop Material-UI SpeedDial from closing when a SpeedDialAction button is clicked

Question

I am wanting to disable the default behaviour of Material-UI's SpeedDial component (https://material-ui.com/api/speed-dial/).

Currently when you click a SpeedDialAction, the parent SpeedDial component will close.

I would like to change the behaviour so that when a SpeedDialAction is clicked the parent SpeedDial component will stay open.

Is there a simple way for me to disable the 'closing' behaviour?

Thanks!

Answer 1

The SpeedDial component's open state is controlled via the prop open. The default example for the SpeedDial has the following onClick function on the SpeedDialAction component:

const handleClose = () => {
  setOpen(false);
}

setOpen sets the open state to false when an item is clicked, and this state is passed to the SpeedDial component causing it to close.

So, just don't set this state in the onClick, and your SpeedDial will remain open. :)