SpeedDialAction onClick broken for some touch screen devices

acroyear commented 6 years ago

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).

[x] This is a v1.x issue.
[x] 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 commented 6 years ago

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 commented 6 years ago

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

amankapoor commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

nisgoswami commented 5 years ago

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 commented 5 years ago

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

nisgoswami commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

mui / material-ui