Material-ui: [v1-beta.9] Select inside a Popover stays focused

[cherniavskii]

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

Expected Behavior

When picking an option from Select and then clicking outside the select container, Select looses focus.

Current Behavior

When picking an option from Select and then clicking outside the select container, Select stays focused.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/m3xknnr4m8

1. Pick an option from Select
2. Click outside the select container.
3. Notice, that Select stays in focused state

Context

Problem appears, when Select without native option is inside of a Popover or other component, which uses Popover under the hood (e.g. Dialog).

I'm pretty sure, that's because Select renders its own Popover for options list (it uses Menu, which uses Popover under the hood) and Dialog also has its own Popover.

This explains, why Select works fine outside a Popover, and why Select with native option also works fine (in both cases there's only on Popover visible at the same time).

Any thoughts on that? I tried to debug that, but at some point I stuck. I would appreciate any help or a feedback.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.9 |
| React | 15.5.3 |
| browser | Chrome |
| etc | |

[cherniavskii]

I'm testing locally, branch v1-beta (01b799a4fd6190ae97f8b529a97a982187891362).
I modified Selects demo page and wrapped Select in a Dialog. Docs are running locally (by npm docs:dev).

It looks like focus doesn't go back to Select after selecting an option.

[cherniavskii]

Also tested keyboard control (#8229) and it is fixed.

[oliviertassinari]

I confirm

[oliviertassinari]

@cherniavskii Thanks for trying out the first fix. I have done a second iteration and added a test accordingly. We should be good :).

[cherniavskii]

@oliviertassinari I confirm, it is fixed. Thank you! ;)

[Msfrhdsa]

Another bug
InputLabel in FormControl falls down at the opening
https://codesandbox.io/s/rj8505o06n

Material-UI -- 1.0.0-beta.16

[oliviertassinari]

@natash5468 Thanks for sharing the reproduction. I'm gonna have a look at it.

[paumonnu]

Hi.

I'm using beta.17 and It seems like it's not fixed. Selects inside dialog won't call onBlur or onClose when option list closes or loses focus.

[oliviertassinari]

@Paumonsu Do you want to open a new issue with a reproduction example (with the latest beta version) :)?

[paumonnu]

Sorry, I'm using beta.30 not .17. I'll attach a test later :).

[paumonnu]

Ok. I've prepared the test, I forked @cherniavskii test for commodity, updated it's material-ui version and added a console log on the following Select events:
-onFocus
-onBlur
-onOpen
-onClose

https://codesandbox.io/s/jnn8jnrzp3

Only onFocus is being called correctly.

[clanrbr]

I am having exactly the same issue. onOpen and onClose are never triggered.