[SpeedDial] blur fired before click, breaks FF Mobile

[vuhrmeister]

On Firefox Mobile clicking (touching) on an action doesn't have any effect.

Expected Behavior

onBlur is not called when clicking an action.

Current Behavior

On Firefox Mobile click event handler for an action is never called since onBlur is called before onClick. This sets the state to open: false. In Chrome (Mobile) it's working, onClick is called even after Dial gets closed via the onBlur handler.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/1r73kv2qr3

The codesandbox is the same code as on the speed dial demo page except that I added an alert() to onBlur and onClick of the action.

Your Environment

Tech	Version
Material-UI	v1.2.1
React	16.4
browser	Firefox Mobile

[mbrookes]

@vuhrmeister I just tested your codesandbox with FireFox mobile on iOS, and can't reproduce the issue (the onClick alert is shown). Is it possible that the Firefox event order has been fixed?

[vuhrmeister]

I tested it on Android and it's still the case. I can test it on iOS tomorrow.

[vuhrmeister]

Okay, tested it on iOS too, there it's working. Tested again on Android, there it's still NOT working as expected.

[acroyear]

This may be related to what I'm seeing in #12646 ?

I just got an IOS device and the speed dial is working. It still is not for Chrome on my android and other touch-screen devices as described in that other bug.

[acroyear]

Quick reminder on browsers on IOS: you are always running Safari, as far as the webkit engine goes. The browsers (FFX and Chrome) are wrappers around Safari's engine, providing shared bookmarks and password settings with your other mobile and desktop modes. But you aren't really running Firefox's or Chrome's actual dom and javascript engine (that is, their webviews).

This is a requirement to getting a browser on the Apple App Store, from the very beginning.

So testing FFX on IOS vs Safari on IOS and you should always see the exact same behavior. IOS is not suitable for cross-platform/browser testing in that regard.

Hmm...maybe we could all pitch in and get you a cheap $29 Android tablet? Ain't good for much, but it'll at least be good enough to test this sort of thing. :D

[jeffshaver]

This is actually happening to us on non-touch devices. We are currently running chrome Version 71.0.3578.98 (Official Build) (64-bit) and my team was having this issue. Removed the onBlur handler and everything seemed to work fine.

[eps1lon]

The onBlur on the SpeedDial will fire if the dial is blurred. If you click an element in the browser then mousedown, blur(previouslyFocused), focus(clicked), mouseup, click events are fired in that order. This means that

On Firefox Mobile click event handler for an action is never called since onBlur is called before onClick.

is expected. Ergo

onBlur is not called when clicking an action.

would not be standard behavior. Each action and the dial are separate buttons that receive individual focus and therefore blur individually.

This is likely an issue with how we document SpeedDial usage.