Ephemeral focus issue clicking outside injection div

[microbit-matt-hillsdon]

1. Open a dropdown or colour picker
2. Click outside the injection div (e.g. bottom left white area)
3. Tab back and note focus outlines aren't as expected, flyout doesn't open, also can't really resume interaction with the open dropdown

Should it close when you click outside? Or when you move back before anything else happens?

See also #526 which may impact any fix.

[maribethb]

yeah, we should probably hand back ephemeral focus / close the dropdown when you click outside.

[BenHenning]

yeah, we should probably hand back ephemeral focus / close the dropdown when you click outside.

I believe closing the dropdown should automatically restore focus, so that is probably a straightforward fix. I haven't attempted it yet.

[BenHenning]

Following up to this: actually, clicking isn't sufficient, I think. You can hit the exact same broken state if you tab navigate out of the color picker as well. I suspect what we really want is to close the picker if it ever loses DOM focus, and at that point also return ephemeral focus.

Edit: The same thing happens for other drop-downs, too, like the one for arithmetic. I suspect all dropdown divs will have this issue, though I'm a little hesitant to assume lost focus always means to close it. This needs further discussion.

[BenHenning]

From discussions in chat, it seems like the best path forward here is probably to always auto-close drop-down divs by default if they lose focus for consistency between mouse & keyboard users, and because it actually seems that this is generally what people want (between this issue, a mention from code.org folks, and #7583).