onFocus does not fire when using TaskList extension

[ospfranco]

What’s the bug you are facing?

I'm using the task list extension, on some of the screens in my application I display a tiptap field, but I don't want it to be fully editable, just want to be able to check the checkboxes inside.

In order to prevent the user from editing but still allow the checkbox editing I'm using the following workaround:

<Tiptap
  onFocus={({ editor }) => {
    console.log("Tiptap has gained focus")
    editor.commands.blur()
  }}
  initialContent={project.notes ? JSON.parse(project.notes) : null}
  placeholder="You can add a default checklist in the settings."
  className="md:max-w-2xl lg:max-w-none"
  onUpdateRef={tiptapOnUpdateRef}
  ref={tiptapRef}
/>

When the editor receives focus the onFocus function is called and the editor blured, this works fine for normal interactions, but the TaskList plugin somehow does not fire this callback, it just marks the checkbox and then immediately focuses the editor

How can we reproduce the bug on our side?

Use a tiptap editor with the TaskList extension

Can you provide a CodeSandbox?

No response

What did you expect to happen?

the onFocus callback should be fired for all focus events not only those initiated by the user

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[philippkuehn]

I can’t reproduce this. For me the editor gets blurred when calling editor.commands.blur() within a focus hook. Even when clicking on the checkboxes. Maybe it helps to run the blur asynchronously.

setTimeout(() => {
  editor.commands.blur()
}, 0)

Otherwise create a reproducable codesandbox and feel free to reopen.

[ospfranco]

Screen.Recording.2022-01-20.at.15.05.20.mov

I have now tried everything, I basically stripped down Tiptap to passing the content and harcoding the onFocus function and still, whenever I click on the checkbox the editor is focused, I even tried calling blur on every render via a useEffect hook:

useEffect(() => {
    const editor: Editor = tiptapRef.current?.getEditorInstance()
    if (editor) {
      editor.commands.blur()
    }
  })

Still not working :(

[ospfranco]

aha! I just discovered that on chrome it is working

[philippkuehn]

Hmm, this only seems to be an issue with safari. Every other browser works as expected.

[ospfranco]

yeah, the callback looks like it is correct, so maybe it is a problem with the blur() call? kinda relieved to find the issue... I thought I was going crazy haha

[philippkuehn]

ok, I found a workaround for safari.

[ospfranco]

thanks a lot @philippkuehn! Any word on which release will I be able to test this?

[philippkuehn]

Update to the latest version :)

[ospfranco]

I don't see any new version for @tiptap/react already on latest (also for tasklist and taskitem)

[philippkuehn]

This was fixed in @tiptap/core.