[Discover] can't enter ES|QL editor when column menu open

[drewdaemon]

Kibana version:
8.13.0

Screen.Recording.2024-02-23.at.12.48.07.PM.mov

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[shayfeld]

Same problem in version 8.12 with ES|QL reference.

[kertal]

Confirmed but I think this is just surfacing in Discover, might be a problem how EuiDataGrid deals with the focus state and I think it's because the ESQL editor is having it's own React render tree, because else the column menu would close when clicking somewhere else? Can you confirm @elastic/eui-team ? Is there something we can do here?

[cee-chen]

might be a problem how EuiDataGrid deals with the focus state

To clarify, if it is an issue with EUI's underlying focus behavior, it wouldn't be specific to the EuiDataGrid component - this would be general to either EuiPopover or EuiFocusTrap.

I think it's because the ESQL editor is having it's own React render tree

The focus trap library we use (react-focus-on) shouldn't care about separate react render trees; it uses vanilla JS window event listeners if I recall correctly. The bigger concern would be if:

1. The esql editor is in an iframe
2. If the esql editor has its own click event listener that prevents events from bubbling or propagating upwards

2 is my suspicion here personally.

[davismcphee]

I also suspect @cee-chen is right and the editor is probably swallowing the clicks. At least that's where I'd start investigating personally.

[kertal]

I think it's because of Monaco, because I've been testing with out push flyout / JSON editor, and it's the same behavior there, it's also Monaco in user there .Is there something we can do with "@kbn/code-editor", @elastic/appex-sharedux , thx!

[Dosant]

it's also Monaco in user there .Is there something we can do with "@kbn/code-editor", @elastic/appex-sharedux , thx!

No ideas. Looks like mousedown handler is deep inside the Monaco editor to set the focus in: http://localhost:5601/exz/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src/node_modules/monaco-editor/esm/vs/editor/browser/controller/mouseHandler.js

And there is the preventDefault() on that mouse down event.

Then when it bubbles up to the react-focus-on inside EUI, clickOutside isn't fired because the event has default prevented: https://github.com/theKashey/react-focus-on/blob/bf292697ef522aaa5b25d663bd39941e69f9b930/src/Effect.tsx#L48

And then, I think, the focus trap reverts the focus from the editor.

[cee-chen]

If editing monaco's mouse handler directly isn't possible, one not-super-great workaround option could be overlaying an invisible div over the monaco editor whenever an EUI focus trap is added on the page, which then would block monaco's mouse handler and trigger the focus trap being removed. 😬

[tsullivan]

I’m wondering if we can add our own mouse handler (on top of monaco's) that will re-broadcast the click event to the window... That would hopefully force the column menu popup to close

[petrklapka]

From Triage on March 11th: Eyo will take a peek to see what can be done and will estimate LOE for a non hacky solution. We'll re-triage based on his input.

[eokoneyo]

I looked into this, and opened a PR here that pretty much implements @tsullivan's suggestion to rebroadcast the event, the approach I took makes it such that every mousedown event that happens within the editor with it's default prevented gets rebroadcasted without the default prevented with the caveat that the target is the wrapper placed around the code editor. This way external listeners are satisfied and the default behaviour for the event propagated by monaco is preserved.