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.
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.
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? 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.
Yes I just tried it with a brand new editor with no extensions or anything extra added to it.
The steps I take are:
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