[AutoComplete] focus gets lost to Popover in Firefox

[jeffberry]

So I've been using AutoComplete successfully for the last few weeks in Chrome. Unfortunately our client hates Google and we need to make our app work in Firefox.

It appears that the current AutoComplete loses it's focus in Firefox as soon as the popover opens with results. I tested this on the official Material-UI documentation site as well. I am using the latest version of Firefox (43.0.4) if that helps.

I've been messing with it for hours trying to figure the issue out myself, but can't seem to make any progress.

[hmeerlo]

I am having a similar problem in Chrome. For me it occurs when I have more than 1 AutoComplete on screen. The popover is closed immediately because of a onClickAway on the render layer of the popover. It results in very weird behaviour.

[hmeerlo]

Ok, this is what I observed:

• Click on the textfield to open the popover
• Focus event results in opening the popover (and it is probably rendered immediately)
• After the focus event the popover immediately receives a click event which is handled by the onClickAway to dismiss the popover again.

It looks like a timing issue, because when I set a breakpoint after the focus event is received and then lit continu it works fine.

[hmeerlo]

@alitaheri I don't think this deserves the Cross Browser Support label, it looks like a bug to me.

[alitaheri]

Yeah, you're right. Thanks

[pdc]

I think the issues @hmeerlo and @jeffberry are describing are different. I am also seeing a Firefox-specific UI problem.

To reproduce:

Step 1.

Open Chrome at http://www.material-ui.com/#/components/auto-complete
Click on the AutoComplete in the Simple example box.
Type chrysanthemum
Result: List of options is displayed below the text box and the text box displays chrysanthemum.

Step 2.

Open Firefox on http://www.material-ui.com/#/components/auto-complete
Click on the AutoComplete in the Simple example box.
Type chrysanthemum
Actual result: List of options is displayed and text box displays c. Clicking down arrow highlights the second item in the drop list, indicating focus is on the list rather than the text field.
Expected result: Same as Chrome.

Although the page I have referred to has multiple autocomplete widgets, the problem also shows on a page with just the one.

[pdc]

Further search reveals this the problem I describe is covered by #3339 and addressed in PR #3356.

It is also possible that #3356 also fixes the other focus issue.

[newoga]

Thanks for updating this @pdc. Everyone can test the changes in those PRs in our latest alpha since #3356 was included as part of that release. Feel free to reopen this if you are still having this problem.

http://www.material-ui.com/v0.15.0-alpha.1/#/components/auto-complete