When you click outside of the editor on the bottom, left, or right, it behaves as expected and the focus is lost. However, clicking just above the editor does not cause it to lose focus.
Expected behavior is that the editor loses focus when an area outside of its interface (up and down) is clicked.
See screen capture example:
Is this in Chrome? That browser has some weird behavior around what focus does when clicking near editable content. You’ll see the same with a plain contentEditable div. There’s not a lot CodeMirror can do about this, without aggressively interfering with the browser’s focus behavior.
Yes it is in Chrome, I checked in Firefox and it works fine, but I could not reproduce it with a plain contenteditable div that I tested in Chrome here:
Likely some of the styles or wrapper elements we use influence the behavior. I’m not invested enough in this to try and isolate which, but you could try if you have the time.
I found out that to ensure proper flex child behavior for the editor content, such as flex-grow and flex-shrink, you need to encapsulate the contenteditable element within an additional div (an let the that outer div manage flex child behavior). This approach appears to resolve the focusing and blurring issues of contenteditable elements when they are direct children of a flex container in Chrome browsers.
I found a similar issue here: Editor is not losing focus when styled with display: flex and flex: auto · Issue #3647 · ueberdosis/tiptap · GitHub
See examples in the codepen one with and and one without contenteditable wrapper:
@marijn what do you think about it? Do you have a plan to fix that?
I don’t intend to add additional wrapper elements to the editor, no. If you’re inserting it into a position where its parent is a flexbox element, it’s up to you to make sure you properly style it.