[Bug]: commands.focus() triggers blur

[elledienne]

Affected Packages

core

Version(s)

2.11.0

Bug Description

After upgrading to 2.11.0, calling editor.commands.focus() triggers a focus and blur event in short succession

Browser Used

Chrome

Code Example URL

https://codesandbox.io/p/sandbox/friendly-paper-wzyqyg

Expected Behavior

Blur should not fire

Additional Context (Optional)

I'm positive this issue is caused by this PR which changes how focus is triggered - in fact, commenting out that line of code fixes the issue for me

Dependency Updates

• Yes, I've updated all my dependencies.

[bdbch]

I wasn't able to reproduce it myself, no Blurring console.log was printed when I reload the page. Could you describe a bit more what exactly this is breaking or when this is caused?

I tried adding a button that will run the blur command too and same here - I only received the Blurring console log once as expected since we blur the editor when you click the button but no additional blur event was sent.

[elledienne]

I made a video for you. It shows that Blurring is being fired when the useEffect triggers the focus command
https://github.com/user-attachments/assets/bac606fc-ad3a-4956-aa3a-8d26900aa500

In our app, the issue is exactly the same as in this demo. When we programmatically focus on the editor, the onBlur fires which is quite problematic for us as onBlur is actually meant to close the editor

[cpgruber]

@elledienne This is affecting my project as well. I've submitted a PR that restores the original code and implements a fix for the Android issue without more broadly affecting non-Android and non-iOS users.

#6043

[nperez0111]

Probably should not be using editor.commands.focus like that in an effect (not to detract from the regression in behviour)

There is an autofocus option on the editor instance which should autofocus the element

[nperez0111]

The reason this is happening is that your application is in strict mode, so it is running that effect twice.

The behavior has changed between the versions though, as you rightly pointed out, so I would maybe consider putting the kludge back in place, but now I'd have to spend time coming up with a new fix for the android issue and evaluating whether it works...

But, yea, you are just using it wrong in the first place and is easily resolved

[cpgruber]

@nperez0111 Assuming the isAndroid() util works as expected does this PR appropriately "put the kludge back in place"? #6043

[nperez0111]

Yea, I mean it is not satisfying, but I'll take it

[nperez0111]

Released in version 2.11.3

[nperez0111]

But, again, you are using the focus command wrong, and should reconsider

[bianca-artola-dialpad]

I'm facing the same issue on web; when I trigger focus() event blur() event is being triggered.
@nperez0111 In which way we should be using autoFocus instead of focus method? From what I understand, autofocus is useful when rendering the component, but in my case I want to trigger the focus once the component is already open (I have an emoji picker and want to trigger the focus after adding an emoji).

[nperez0111]

@bianca-artola-dialpad, how you are using it, sounds correct to me. You are right, autofocus should only be relevant on component mount.

What version & platform are you on? Because version 2.11.3 should be how it was working prior.

Also, curious what event handlers you guys are even registering for blur events that this is even a problem?

[bianca-artola-dialpad]

Tiptop version:

    "@tiptap/core": "^2.6.6",

I can try updating to 2.11.3.
I'm using Vue2

Also, curious what event handlers you guys are even registering for blur events that this is even a problem?

We use the blur event to track when the input loses focus so we can display or hide UI elements based on the input's focus state. For example:
Example ->

<message-input 
  @blur="blur"
   ...
/>
<message-input-footer
    v-if="hasFocus"
/>
...
blur () {
  this.hasFocus = false;
},

This allows us to dynamically toggle the visibility of components like the footer.
Let me know if that makes sense; i'll update tiptap version and let u know

[bianca-artola-dialpad]

Updating @tiptap/core to "^2.11.3" did not fix the issue. Was the fix that was made also for web? or it was only for mobile?

[nperez0111]

Can you double check upgrading all of your packages (aka all @tiptap packages) since you can technically have multiple versions installed.

If that does not work, then you likely will need to create a new issue with a reproduction, because it likely is not the same issue as this one then