Focus on `ProseMirror` element doesn't work if not editable

Show
1

Hello,

I have set the contenteditable property to false when I render it and I am trying to focus this element by calling .focus() on it, but it doesn’t work.

Based on my research, the focus is controlled internaly in the library by checking the contenteditable property and it cannot be overwritten from the parent, but I have no straight answer from your documentation. Is that true?

If not, any idea why?

2

Yes, this is the expected behavior. An uneditable element, by default, isn’t focusable. You can use the tabindex to make it focusable if you want to.

1 Like
3

My team once had a need for an editor that could be disabled but still allowed the user to make selections, and we used a plugin with filterTransaction to prevent edits. The code below isn’t complete, but you get the idea:

new Plugin({
    filterTransaction(tr, state) {
        if (this.getState(state).isEditable) {
            return true;
        }
        return !tr.docChanged;
    }
});