How do I get Material-UI SpeedDialAction onClick events to fire when SpeedDial is open on click only (not hover)

For some reason, when I change material-ui <SpeedDial> to remove the prop onMouseEnter={handleOpen} so that the speed dial only opens upon clicking the FAB instead of on hover, the onClick event in <SpeedDialAction> does not get triggered when I click a speed dial menu item. I feel like I’m missing something fundamental here.

  return (
    <SpeedDial
      ariaLabel="Add"
      className={classes.root}
      icon={<SpeedDialIcon />}
      onClick={handleClick}
      onClose={handleClose}
      onBlur={handleClose}
      // onMouseEnter={handleOpen}
      // onMouseLeave={handleClose}
      open={open}
      direction={mobile ? 'up' : 'down'}
    >
      {actions.map(action => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          tooltipTitle={action.name}
          tooltipOpen
          classes={{ staticTooltipLabel: classes.staticTooltipLabel }}
          onClick={e => {
            e.preventDefault();
            alert('x');
          }}
        />
      ))}
    </SpeedDial>
  );

Answer

Using preventDefault will not cause the click event to not propagate to the parent element (which from what I understand is what you are trying to get).

You should use the stopPropagation instead:

<SpeedDial
  ariaLabel="Add"
  className={classes.SpeedDial}
  icon={<SpeedDialIcon />}
  onClick={handleClick}
  open={open}
>
  {actions.map(action => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
      tooltipOpen
      onClick={e => {
        e.stopPropagation();
        alert("x");
      }}
    />
  ))}
</SpeedDial>

Check the following example: https://codesandbox.io/s/speeddial-open-on-click-rleg5?file=/demo.js