SpeedDialAction onClick broken for some touch screen devices

[acroyear]

On touch screen devices (a Chromebook, and an Android 8 phone running Chrome Dev), onClick handlers are not working on SpeedDialAction. I see a change in focus (briefly) and the ClickAwayHandler seems to kick in to hide the SDAs, but the action itself never fires (nor is there a ripple effect).

This was working on MUI 1.4.x. It broke with 1.5.x (and labs 10 and 11).

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

Expected Behavior

On non-touch boxes (Mac, Windows), these buttons work. you can see the ripple effect and the action happens. This includes Chromebooks that do not have touchscreen support (a Hisense 11).

On touch-screen boxes, I expect the same. They worked in 1.4.x.

Current Behavior

On touch-screen devices, I have tried Chromebook and Android 8 - Chrome and (where possible) Firefox, the SpeedDialActions do not work. As described above, I see the focus happen, but the neither the ripple nor the actual action are triggered. It does not matter if the button was touched on the screen, clicked by a touchpad, or clicked by a mouse.

Steps to Reproduce

On Android, use Chrome or Firefox browser if you can - the player is broken using Samsung's built-in.

• Go to http://subfiresuite.com/m3/#/directory/11 (apologies for the music selection - the demo collection there isn't mine - just mute if it bothers you).
• click the "play" button at the top under the amber bar.
• in the lower right is the FAB for speed dial. click it.
• click one of the options like 'Skip Album' (if you click 'mini player', the icon in the upper right will flip you back).

Context

These buttons were working prior to the 1.5.x layout and tooltip changes. I use them for secondary features that are now unavailable in my player.

Your Environment

Tech	Version
Material-UI	v1.5.1 (lab alpha 11)
React	16.4.2
Browser	latest Chrome, Firefox for the platforms
Android	8.0.1
ChromeOS/Chrome	68 for the Chromebook
OSX	10.11.6
Windows	10

Since Firefox also has the problem on Android, I believe this to be an MUI issue and not a Chrome issue. All other buttons on the screen are working correctly.

[acroyear]

Code-wise, I have tried both

    <SpeedDialAction classes={{button: classes.speedDialAction}} icon={(<BookmarkIcon/>)} tooltipTitle="Bookmark" ButtonProps={{onClick: this.toggleBookmark}}/>

and

    <SpeedDialAction classes={{button: classes.speedDialAction}} icon={(<BookmarkIcon/>)} tooltipTitle="Bookmark" onClick={this.toggleBookmark}/>

The results are the same - normal screens work, touch screens do not (even if using the mouse to click it)

[acroyear]

verified that it works just fine on a non-touchscreen chromebook.

[amankapoor]

Was about to raise this issue, but found this one. onClick is not working. I have OnePlus One with Chrome v68.0.3440.91 and Android is 8.1.0, it does not work there. I have another device which Mi A1, same case; and same is happening on Samsung Tab 3 8 inch. Although, on my desktop, it is working as expected.

My dependencies

    "@material-ui/core": "^3.0.1",
    "@material-ui/icons": "^3.0.1",
    "@material-ui/lab": "^3.0.0-alpha.13",
    "react": "^16.4.2",

[amankapoor]

If anybody here can spend some minutes guiding me how this can be fixed then I am ready to involve myself in doing this, but I need some guidance at first.

[acroyear]

see that other issue - looks like a timing thing on Android that a blur is firing before click is, and since the button is blurred, it isn't catching the click handler anymore. I'll look again at the history of that file to see what might have caused it to break when the tooltip stuff was changed.

[acroyear]

This has only gotten worse with -alpha.16. Now even on normal desktops the actions don't respond (unless i'm missing some incompatible API change), and on mobile it is triggering the event under the button which happens to be my slider for the song currentTime. For now I'm going to just try to come up with a totally different design to manage those 5 actions I need.

[acroyear]

updated the link to the app that replicates the issues as originally described, as i have had to move on with an alternate way to restore those features.

[nisgoswami]

Hi is there an update on this , maybe an alternate way to do this on phone

[nisgoswami]

updated the link to the app that replicates the issues as originally described, as i have had to move on with an alternate way to restore those features.

Can you tell us what was the alternate in fixing this

[acroyear]

A total screen redesign that avoided that control entirely. No help if you're really attached to it.

[nisgoswami]

A total screen redesign that avoided that control entirely. No help if you're really attached to it.

Thanks ,

but i just found found that the onmousedown was working on a touch screen , dirtily used that with the istouch to fix my code.

[acroyear]

My first experiments with onmousedown didn't work but that was back in -11 when I first saw the problem. maybe something changed, but I've been working on the 'TV' version of my app instead for the last few.

[zwise]

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