Escape no longer reliably closes field editors

[microbit-matt-hillsdon]

In local builds of the demo, it seems to work only for the first colour picker and never for dropdowns.

The pre-focus-changes version currently deployed works reliably in this respect.

[BenHenning]

FWIW local testing shows that in-line editors don't seem to have this problem. It may be specific to widget and drop-down divs. The fact that it works once and then never again is quite odd.

[BenHenning]

So digging into this: fields self-manage the escape key for closing any editor that's opened. Focus management has had behavioral changes on what's focused when, particularly for fields. I'm wondering if the keyboard events simply aren't going to the input handler anymore and may need to be brought up to a higher level for focus.

The fact that the behavior is changing is quite odd though.

Edit: FieldInput's escape management is separate from drop-down (and probably the color picker as well), though it's unclear to me if that was always the case.

[BenHenning]

Hmm the plot thickens.

I checked this against c90aae9 and RaspberryPiFoundation/blockly@b9b40f4 (as sync points prior to FocusManager being fully integrated), and the problem still exists in exactly the same way.

I also checked against your hosted version above @microbit-matt-hillsdon and it also breaks exactly the same way: escape doesn't work on drop-downs and it only escapes the first time for colour picker. I'm using Chrome--perhaps this is a browser difference?

While this is very much focus in nature, it doesn't currently seem like a FocusManager-specific regression (at least for Chrome).

[rachel-fenichel]

@microbit-robert in case you have more information while Matt is traveling.

[microbit-robert]

First problem here is that the opening issue comment is out of date. That link points to the plugin test page which is now building with the latest code.

In inject.ts, keydown events are bound to the Blockly dropdown content div. In dropdowndiv.ts, there is a clearContent function that removes the dropdown div completely and recreates it. Keydown events are not re-bound to this newly created DOM.

For a normal field_dropdown.ts, the dropDownDiv is cleared before it is populated, so keydown events don't work at all. I presume this doesn't happen for the colour picker, which means it works once, but during the clean up, the dropDownDiv is removed and so are the event handlers with it.