[AutoComplete] triggerUpdateOnFocus buggy

[RicardoJPFerreira]

Greetings.

On my react application, im using material-ui AutoComplete.

Im using "showAllItems" version, that passes the property triggerUpdateOnFocus with true value, mounted on a dialog (from material-ui too)

Whene I click inside the input, it shows the menu list, but it disappears instantly on mouse click up.
I can state that if i click and leave mouse button down, that it does not disappear.

Im using the last version of materail-ui and my browser is chrome.

Best regards awatting for a feedback,
Ricardo Ferreira

[oliviertassinari]

Is #3356 solving this issue?

[RicardoJPFerreira]

No, it's not working. I replaced triggerUpdateOnFocus property with openOnFocus. still the same bug.

[oliviertassinari]

@RicardoJPFerreira Are you using the master branch? Otherwise, that sounds like an issue with the internal Popover component.

[RicardoJPFerreira]

I'm getting allways the last version via NPM on visual studio.
Atm I have the 0.14.4

[oliviertassinari]

Well, the PR I have linked to you wasn't released on npm. The master branch is two week ahead of the latest release on npm.

[filbertteo]

I have encountered this bug as well. Tried to use the latest version from the master branch, and that one has another bug altogether: In certain cases, while typing in the TextField, it suddenly loses focus. And I couldn't focus on it any more after that when I tried clicking on it. So I'll be sticking to 0.14.4 for now.

[oliviertassinari]

@filbertteo could we have more details on the issue with the autocomplete on the master. How can we reproduce it?

[filbertteo]

@oliviertassinari My bad. I was using the AutoComplete from the master branch while the other source files are from the 0.14.4 branch, so that might be the reason why. I'll try again soon with all files from the master branch and update you again.

[RicardoJPFerreira]

@oliviertassinari Whene do you think this PR will be released on NPM?
Regards

[oliviertassinari]

We plan to do an alpha release soon.

[mbrookes]

@RicardoJPFerreira - does it fix this issue for you?

[RicardoJPFerreira]

@mbrookes The correction that oliviertassinari gave me isn't yet available on NPM, so, i didn't try it yet.
Like he said, they plan to release an alpha soon.

[mbrookes]

Okay, going to close this for now. Feel free reopen if the issue persists after you test with HEAD (or 0.15.0-alpha.1 if you'd prefer to wait for a release).

[RicardoJPFerreira]

Greetings.
I must reopen this issue.

See the following video in order to understand my problem: http://screencast.com/t/NoBptezBfiwr

The 2 times that the "popover" apears with the list, is only whene I press the mouse left button and leave it pressed. Otherwise, a simple click will never open the list.

[mbrookes]

I'm unable to reproduce this in:

Material-UI: v0.25.0-alpha.1
Browser: Chrome 48.0.2564.116, OS X 10.9.5.
React: 0.14.7

Anyone else?

[RicardoJPFerreira]

I have the same chrome version running on win7

cant you reproduce on the following link?
http://www.material-ui.com/v0.15.0-alpha.1/#/components/auto-complete

[bencallaway]

@mbrookes, @oliviertassinari, you should be able to reproduce it on the "Data Sources" example on the docs page: http://www.material-ui.com/v0.15.0-alpha.1/#/components/auto-complete and/or http://www.material-ui.com/v0.14.4/#/components/auto-complete. The "showAllItems" example has a an openOnFocus property of true. If you click on and off and back onto that field you should see the popover flicker open and then close. I see this while using Chrome 48.0.2564.116 on OS X 10.11.3.

I have also run across this bug. The issue seems to arise b/c the underlying Popover / RenderToLayer elements interpret a click on the AutoComplete's TextField as a click away from from the Popover.

AutoComplete#close is passed as Popover#onRequestClose handler:
https://github.com/callemall/material-ui/blob/master/src/auto-complete.jsx#L529

Popover#onRequestClose is called whenever RenderToLayer#componentClickAway is called:
https://github.com/callemall/material-ui/blob/master/src/popover/popover.jsx#L224
https://github.com/callemall/material-ui/blob/master/src/popover/popover.jsx#L392

I've so far "fixed" this locally by adding a condition within the onRequestClose handler passed from AutoComplete to Popover. The handler ensures TextField is not in focus before calling close(). Is this a correct assumption / constraint to place on closing the Popover? If so I can put a PR together if you'd like.