[Select] Feels less response than native counterpart

[rynti]

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

Expected Behavior

When I use a Select Field, it should "feel" responsive and fast. Currently, before the menu with all select options pops up, we wait until the mouseclick is over. Instead, at least on non-touch devices we should consider starting the opening animation as soon as the click starts (for instance the mousedown event).

Current Behavior

As described in "Expected Behavior", currently we wait until the click event is over before the Select field opens the menu with all options. This makes it feel much less responsive and slow compared with say the native select field in Chrome, which opens instantly.

Steps to Reproduce

Check the Select page in the current documentation to try it out: https://material-ui.com/demos/selects/

Context

We use the select field in various places of our app, and we feel like the current behavior of the Select field makes our application feel sluggish and slow.

Your Environment

Tech	Version
Material-UI	Beta 20
React	15.6.2
browser	Google Chrome 61.0.3163.100

[oliviertassinari]

One important thing to take into account: the behavior should stay the same for touch interactions as we need to filter our scroll touch interactions.

[oliviertassinari]

I hope it's as simple as implemented as replacing the onClick by onMouseDown event callback.
https://github.com/callemall/material-ui/blob/7064086473f255bd48fcfc2987b0353a8c7c7b7c/src/Select/SelectInput.js#L347

[rynti]

I tried your solution and it turns out it works just fine by adding an equivalent onMouseDown handler. Tested on desktop (Google Chrome) and mobile (Android Phone).

[oliviertassinari]

@rynti Do you want to submit a pull request?

[adeelibr]

if onMouseDown handler doesn't work, is there a possibility where we can have both, onClick & on onMouseDown handler.

Where as you say #9009 (comment)

I'm sorry, this is definitely not a simple issue to fix. It's surfacing another issue with how the focus is handled. It's will require a rethink of how it's done. It's certainly not a one-line change.

where onClick. can manage how the focus is handled and onMouseDown event calls

https://github.com/mui-org/material-ui/blob/7064086473f255bd48fcfc2987b0353a8c7c7b7c/src/Select/SelectInput.js#L347

@oliviertassinari

[jmetev1]

I worked on this for a while, but then I thought I would check on the actual premise of the idea, that using onmousedown over onclick would make things any faster, and it sure doesn't seem like it based on my testing and research. I would say maybe close this so nobody else wastes times trying to implement it. @oliviertassinari

[oliviertassinari]

@jmetev1 I have been benchmarking (testing) as many platforms as possible, they all close the select and menu at the mouse down event rather than the mouse up event. I think that it's a good reason on its own to try to follow this convention.