Cannot switch focus from editor to an outside element in certain scenarios

[zcuric]

Description When adding link or image through custom form menu, cannot switch focus to the input field from editor. Focus is stuck on editor, which wasn't the case in tiptap@1

Steps to reproduce the bug

1. Create an form that will activate on button click with input field
2. Try to change focust with this.$refs.input.focus

Expected behavior Focus should be switched to input

Screenshot, video, or GIF

Environment?

• operating system: MacOS
• browser: Chrome
• mobile/desktop: Desktop
• tiptap version: 2

[zcuric]

After checking this out of my working environment in an isolated sandbox, this seems to be an issue with my environment.

[oliviermills]

I am having the same issue. @zcuric What was the issue with your environment that caused it?

[oliviermills]

I am having the same issue. @zcuric What was the issue with your environment that caused it?

In my case I was overusing the .focus() in my menu bar items.

[ntcho]

In my case I was overusing the .focus() in my menu bar items.

I had the same problem. I mistakenly added a function invocation instead of a function body to the onClick props.

It was like:

<Button
  onClick={editor.chain().focus().toggleBulletList().run()}
  ...
/>

But it should be like this:

<Button
  onClick={() => editor.chain().focus().toggleBulletList().run()}
  ...
/>

Ctrl + Shift + F on VS Code to search all focus() usage and check whether you are calling focus() on every re-render.