Editor gets focused randomly when clicking other elements in DOM

Hey there! I’m having this weird issue with the editor where if I click outside of it, anywhere on the page, sometimes the editor gets randomly focused and then blurred. Not sure what I’m doing wrong

I added the following extension to track focus:

  const focusChange = EditorView.focusChangeEffect.of((_, focusing) => {
    console.log("focus change", focusing);

    return null;
  });

and this is what happens:
Feb-25-2023 19-28-17

Here, the code editor is inside of that pink div and I’m clicking around it which makes the focus issue happen.

How can I “disable” this? I basically want to control the focus of that editor programatically meaning only focus the editor if the user clicks into it or presses a hotkey or something. Once the user clicks out of it, basically make the editor lose focus until the user clicks into it again or presses the hotkey.

Sorry for the dumb question, probably a newbie mistake.

Is this happening in Chrome? Does the same thing happen when you put a plan contentEditable element where CodeMirror currently is?

1 Like

Yes, this was Chrome but I just tried it in Firefox and it happens there as well.

I tried replacing the entire code editor with just a basic one with no additional divs around it or styles and the issue was still there.

One thing I noticed that this is only a problem if I click into the editor to type something and then click away to change the looks around the editor or something. There is a switch that toggles line numbers and stuff like that. When I click away, the editor gets unfocused for a moment and then automatically grabs focus again, without me clicking on it.

If I never click into the editor, it never grabs focus like this, which would be expected.

So this seems to be something the browser is doing, and I’m not sure it is a good idea for the library to try and block or cancel it (if that is even doable).

Just going to pop 1 more question in here…

I noticed that if I click into the editor, the view.hasFocus doesn’t switch to true, but when I programmatically run the view.focus() on lets say a hotkey press, the hasFocus immediately switches to true.

Then, when I want to remove focus from the editor using view.contentDOM.blur(), the hasFocus stays true for some reason.

For simplicity, I have the key F setup to focus the editor with the command aboce and ESC to blur.

What is the proper way to handle focus in this case? :thinking: It’s giving me a headache as if I have the editor in focus and then I want to navigate to the settings panel where I have a Select component and if I hit enter on one of its options, the editor grabs the focus and sticks a new line in. Not sure why but I would love to understand.

That’s not something I’m seeing. Does it also happen in a simple setup outside of your app as well?

Yes I just tried it with a brand new editor with no extensions or anything extra added to it.

The steps I take are:

  • page loads
  • click into the editor, start typing (hasFocus becomes true)
  • click away to another component on the page, a Select for example… I change its value by clicking on an option in which case nothing happens. But if I use the Enter key to select the option, the editor adds a new line at the previous cursor location.

The funny part is if I dont click into the editor when the page initially loads, and just go ahead and change the select values or whatever (with the Enter key), the new line doesn’t get added. I’m assuming because the editor never had focus? Also, if I use the Space key to select values, the new line doesn’t get added either (nor a whitespace).

When I console log the focus change events, the focus jumps back to the editor for a moment and thats when the new line gets added. Not sure why though

When tabbing out of the editor, the hasFocus doesn’t change to false. But if I click out on another element, it does.