Search code examples
javascriptreactjsmaterial-uispeed-dial

Can I disable the Material-UI SpeedDial mouseover event

I am wanting to disable the default mouseover/hover behaviour of Material-UI's SpeedDial component (https://material-ui.com/api/speed-dial/). Currently when you mouseover the primary icon, the SpeedDial component will open. It will also open on click. This has caused issues with some of our users as when they mouse over the button - it opens - and they immediately click and it closes.

I would like to keep the just the click action for opening the SpeedDial for touch screen devices.

Is there a simple way for me to disable the hover/mouseover event? As far as I can tell the API does not allow this.

Thanks!

Solution

  • This behaviour can be achieved by ignoring onOpen prop and control the component with onClick prop.

    // Component code

const [open, setOpen] = React.useState(false);

const handleOpen = (event) => {
  setOpen(!open);
};

return (
   <SpeedDial
      onClick={handleOpen}
      open={open}
      ...
   />
);

    You can see a working example here: https://codesandbox.io/s/material-demo-1lwci