Fix SpeedDials pressed twice on mobile

[AlbertLucianto]

This is a possible fix for issue #10684

Description

Currently in docs, the tapping on SpeedDial button will trigger onMouseEnter and onFocus in mobile before calling onClick, i.e. the open state transitions from

false (initial state) > true (onMouseEnter) > true (onFocus) > false (onClick toggle)

Solution

Need to know whether page is opened in touch screen. It can be checked through

if (typeof document !== 'undefined') {
   isTouch = 'ontouchstart' in document.documentElement;
}

and set the SpeedDial props

<SpeedDial
  onFocus={isTouch ? undefined : this.handleOpen}
  onMouseEnter={isTouch ? undefined : this.handleOpen}
>

Really appreciate for a review!

[mbrookes]

@AlbertLucianto Thanks for looking into it. The fix looks good to me, but I will let @oliviertassinari have the final say.

[oliviertassinari]

@mbrookes I don't want to focus on extra components before the release of stable v1. I trust you with this. I won't review it;

[mbrookes]

@AlbertLucianto Thanks!

[mbrookes]

@AlbertLucianto Unfortunately this may be problematic for hybrid touch / mouse devices (Surface Pro etc.) Could you take another look? I won't revert this just yet.

[AlbertLucianto]

@mbrookes You're correct, I haven't considered such cases. Let me try work a little bit more about that. If you have any suggestion, I'd be very happy to know!

[mbrookes]

@AlbertLucianto neither had I - @oliviertassinari pointed it out. (Just wish it was before I merged this 😄). It's a tricky one for sure.

[AlbertLucianto]

@mbrookes Actually, one solution could be by adding onTouchStart={this.handleTouch} and

handleTouch = e => {
  e.stopPropagation();
  this.handleClick();
};

So that the default mouse-emulation handling doesn’t occur. However, it still does not work correctly.

One cause may be related to this issue in React about onTouchStart's preventDefault which is still open.

[MathiasKandelborg]

Sorry for the long silence, I didn't notice the PR being referenced to my issue.

I'll be sure to verify and test as soon as I get some spare time!