How to get focusin events on a custom widget decoration

v6
1

I’m adding a custom widget decoration (a contenteditable div) and would like to receive focusin events for this widget. While I can get a mousedown event with event.target set to this contenteditable div, the focusin event which follows it has event.target set to the div containing the entire CodeMirror editor. How can I instead get a focusin event with event.target === the contenteditable div?

A solution I found: CodeMirror calls event.preventDefault() if my event handler returns true, or handles the event itself if my event handler returns false. I modified the CodeMirror source to do neither if I return null. However, I’d obviously like an alternative that doesn’t involve editing the source (or accepting a PR with this patch). What’s the best path forward?

I’ve attached a simple demo showing the problem. The user-facing GUI is:
image

Clicking on the word “Testing” (created by my custom widget decorator) produces the following in the debug console:

image
image750×255 9.87 KB

Notice that the mousedown event gets the contenteditable div, while the focusin event gets the entire CodeMirror div. Using the patched version of CodeMirror instead produces:

image
image746×235 8.58 KB

To build:

npm install
npm run build
npm run serve

Then, click on codemirror-test.html.

The code is at: CodeMirror problem with focusin handlers · GitHub

1 Like
2

Look at WidgetType.ignoreEvent – I suspect the editor is handling events in your widget that it shouldn’t, and thus claiming back focus when it is clicked.

3

@marijn, thanks for your advice! You were correct – updating the code to be:

    ignoreEvent(event: Event) {
        if (event.type === "focusin") {
            return false;
        } else {
            return true;
        }
    }

…fixed the problem. Thanks again!