[Bug]: Focus extension in Firefox results in the cursor position not being updated when the control is refocused

[WhiteSage]

Affected Packages

focus

Version(s)

2.11

Bug Description

1. Create a tiptap editor with the Focus extension.
2. Write some text.
3. Click somewhere away so that the editor loses the focus.
4. Click over the editor, anywhere over the text. The editor will be refocused but the cursor position will not be updated to where the user has clicked.

The bug only appears on firefox. It can be seen on the official webpage example for the Focus extension, in both the React and Vue tabs.

Browser Used

Firefox

Code Example URL

https://tiptap.dev/docs/editor/extensions/functionality/focus

Expected Behavior

After clicking the text cursor should be positioned at the place where the user has clicked, as it happens when the Focus extension is disabled.

Additional Context (Optional)

Browser: Firefox Version 133.0.3 (64-bit) on Windows 11 v. 23H2

Dependency Updates

• Yes, I've updated all my dependencies.

[nperez0111]

Hm, I cannot reproduce this on macOS Firefox, can you show me in a screen recording what you are seeing?

[guanriyue]

I reproduced this issue on my MacBook.

Firefox 124.0.1 (64-bit)

In Firefox, when refocusing, the editor's cursor position is not at the mouse click location but at the last selection.

https://tiptap.dev/docs/editor/extensions/functionality/focus

2025-01-03.17.26.27.mov

In my local development environment.

2025-01-03.17.10.46.mov

Chrome 131.0.6778.205（正式版本） (arm64)

In Chrome, the behavior is as expected.

In my local development environment.

2025-01-03.17.14.57.mov

If the FocusClasses extension is removed, the cursor in Firefox works as intended.

tiptap/packages/extension-focus/src/focus.ts

Lines 46 to 52 in 5370cbe

	const { isEditable, isFocused } = this.editor
	const { anchor } = selection
	const decorations: Decoration[] = []
	if (!isEditable || !isFocused) {
	return DecorationSet.create(doc, [])
	}

I tried removing the isFocused check, and it works correctly.

Additionally, I tried the following code to check focus instead of using editor.isFocus, but it doesn't work correctly either.

     state: {
        init: () => {
          return {
            focused: false,
          };
        },
        apply(tr, prev) {
          if (tr.getMeta('blur')) {
            return {
              focused: false,
            };
          }

          if (tr.getMeta('focus')) {
            return {
              focused: true,
            };
          }

          return prev;
        },
      },
      props: {
        decorations: state => {
          const { doc, selection } = state;
          const pluginState = plugin.getState(state);
          const { isEditable } = this.editor;
          const { anchor } = selection;
          const decorations: Decoration[] = [];

          // const isFocused = this.editor.isFocused
          const isFocused = Boolean(pluginState?.focused);

I suspect that the following code has a slight 'conflict' with Tiptap. In Tiptap, isFocus changes immediately based on the focus event, and then FocusPlugin.decoration is executed immediately. This might prevent Firefox from adjusting the cursor position according to the mouse click.

https://github.com/ProseMirror/prosemirror-view/blob/f9b39085ebe461e60fa21aad1a0ecdc937c2ca8d/src/input.ts#L759-L771

Simply removing the isFocused check is clearly not the correct approach. Using the following style can make it work; however, the downside is that since has-focus is not removed during view.blur, it flickers when focusing again. A better solution is needed.

.ProseMirror-focused .has-focus {
  outline: 1px solid blue;
}

2025-01-03.17.23.07.mov