Prevent focus when clicking on a button

1

In order to avoid focus on the editor I noticed it to be sufficient to define

mousedown: (_, ev) => {
  console.log("Mouse down")
  console.log("Prevent default...");
  ev.preventDefault();
},

in handleDOMEvents on the EditorView. Indeed, whenever I press on some random text in my editor it doesn’t focus, great! However, now I have an element that defines the toDom function as

[
  'button',
  {
    contenteditable: false,
  },
  0,
];

I now adapt the mousedown function to only prevent the default when the target has contenteditable set to false (just like the button above). Something like:

mousedown: (_, ev) => {
  console.log("Mouse down");
  const canEdit = ev.target.contentEditable;
  if (canEdit === "false") {
    console.log("Prevent default...");
    ev.preventDefault();
  }
}

I now do the following:

  1. Press somewhere on ‘regular’ text inside the editor - say location A -, we get focus (as expected)
  2. Press outside the editor, to remove the focus
  3. Now I press the button
  4. It focusses on location A. Why?!

Point 4 is what I want to avoid. I tried implementing all reasonable handleDOMEvents, but none which avoided focus on button press. What am I missing?

2

I just created a sandbox, to find out that it is working as expected. I will have to dig into what is happening in the ‘real life’ application.

3

Make sure you don’t put your editor instance in your Vue state. That messes everything up in hard-to-debug ways.

4

For those running into the same focus difficulty (in particular on mobile usage), I have been able to simply fix it by specifying the button as follows:

[
  'button',
  {
    contenteditable: false,
    onMouseDown: 'event.preventDefault()',
  },
  0,
];

The fix was much easier than I thought.