Material-ui: [SpeedDial] SpeedDialAction onClick not working when you click the touch screen

[knight3001]

• [ ✔] This is not a v0.x issue.
• [✔] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

SpeedDialAction onClick should trigger when click the actions.

Current Behavior

For the laptop with touch screen, it works fine for touch event, but not works when you get a mouse and click it.

Steps to Reproduce

Just run the example https://material-ui.com/lab/speed-dial/ on touch screen with the mouse click.

Link:

1.
2.
3.
4.

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.1.1 |
| React | v16.4.2 |
| Browser | Chrome v69 |
| material-ui/lab | 3.0.0-alpha.17 |

[JBBx2016]

Hi - I have looked into this particular case, and it appears that the onClick parameter is not passed along to Button component in SpeedDialAction if device is touch capable.

This was introduced by the following commit: https://github.com/mui-org/material-ui/commit/3db734f547cd755b01ad3009e4216478491cc335

Below is a screenshot from the commit showing that onClick is not passed to Button:

At least clickProps should also contain onMouseDown: onClick.

[ulrichSchreiner]

hi,

would be great to get a fix for this. with this implementation our surface-book cannot click anymore on the button. you have to touch it.

a little strange for the users ...

[seanchambo]

Are we able to get a fix for this?

[Ameobea]

We're still seeing this issue. I've had to set up custom behavior (showing the content on hover rather than on click) if that document.documentElement.ontouchstart prop exists) in order to work around this for some users.

[zwise]

Has anyone seen newer Macbooks experiencing this issue in Chrome due to the Touchbar?

[Ameobea]

No; I use a macbook with the touchbar at work, but the issue doesn't happen for me. I think it's due to the fact that my document.documentElement doesn't have the ontouchstart attribute.

[michaelplazek]

I'm seeing the same behavior is is described above. The event isn't being passed to the button on touch capable devices. Its coming up as undefined.

[JapuDCret]

one fix for me was passing the onClick via the ButtonProps see SpeedDialAction.js#L133

<SpeedDialAction
    key={'do-something'}
    icon={<EditIcon />}
    tooltipTitle={'Do something'}
    tooltipOpen
    // onClick={(e) => this.doAction(e)}
    ButtonProps={{
        onClick: (e) => this.doAction(e)
    }}
    />