[AutoComplete] Doesn't selects option on click

[w01fgang]

Problem Description

Click with mouse doesn't select option in dropdown menu, the menu closes before filling the field.
I use touchpad on Mackbook, so the tap works well, but the click doesn't.
On documentation site, in v0.15.0-alpha.1, the problem exists.

Possible solution

In auto-complete.js I was found the problem in handleBlur function:

this.timerBlurCloseId = setTimeout(() => {
        this.close();
      }, 0);  // when I change from 0 to 300, click works well

Versions

• Material-UI: v0.15.0-alpha.1
• React: 0.14.7
• Browser: Chrome 48.0.2564.116 (64-bit), Safari 9.0.3

[rynti]

Experiencing the same issue, any progress on this?

[danpozmanter]

Same behavior for me in 0.15.0-alpha.1.

[heetvachhani]

@w01fgang thanks for opening this issue. Yes we do have this problem in documentation site.
I checked your solution and it seems to working correctly.
what do you think @mbrookes @newoga?

[mbrookes]

Invoking @callemall/material-ui, as this is the third or fourth issue lately requiring timers in strange places to solve race events, and it feels like we need a consistent solution.

Ideas anyone?

[oliviertassinari]

@w01fgang I'm not sure to understand. I don't see any difference when using 300 instead of 0. @heetvachhani Do you have a gif?

[heetvachhani]

@oliviertassinari Yes, Here's gif.

[oliviertassinari]

Oh, I get it! I was using my mac touch pad. That explain why I haven't noticed it.
@heetvachhani Thanks.

[w01fgang]

Yes, it's work if you use Macbook with touchpad, tap works well.
But there is a comment:
The blur event occurs first on a click device and after on a touch device
The popup menu closes before click on them.

setTimeout(() => {
        this.close();
      }, 0);

So, there is no sense to use setTimeout with zero, because the function passed to setTimeout start immediately.

[oliviertassinari]

That should be fixed by #3669.