Losing text selection / focus in mobile browsers

[cadars]

Description
When toggling marks or nodes with buttons, the virtual keyboard slides up and down, and in some cases (iOS Safari) loses the text selection entirely and doesn't slide back.

I believe this is a newly introduced bug, I have a build from 2021-08-09 behaving normally.

Steps to reproduce the bug
Steps to reproduce the behavior:

1. Use a mobile browser (tested with Android Chrome and latest iOS Safari)
2. Open the default example or any other with a menu.
3. Select some text and apply formatting with the menu buttons.
4. Virtual keyboard slides up and down, sometimes losing the text selection.

Expected behavior
Text selection should stay focused.

[hanspagel]

What if you add event.preventDefault to the buttons?

[hanspagel]

Ah, okay. 😛

[cadars]

Thanks for the quick fix on iOS! 🙌

But I think the issue is still happening with Chrome Android, for both Vue and React in the default example.

[philippkuehn]

it’s fixed in the packages but we have to update the demos 😅

[cadars]

@philippkuehn Can you check on an Android phone if this is really fixed? I tried on two different devices, latest Chrome, and the virtual keyboard still slides up and down… (this doesn’t happen on the main demo of the ProseMirror website, for comparison)

[denweng]

This approach soves the Problem on most* Devices. Used in am button with react:

 onMouseDown={(e) => {
          e.preventDefault()
          e.stopPropagation()
          editor.chain().focus().setColor('#F98181').run()
        }}

• very strange behaviour on some devices, e.g. Galaxy Tab A with Android 10
  Only when the curor is at the end of the text there is a problem:

• click the button
• the mark gets active (tested with color and bold)
• typing a key causes to activate the styles/marks of the last char
• text gets inserted with the unchanged style

... if someona has any idea, I'm happy about every hint

[denweng]

Ha! This seems to work.
Just add an additional input (move out of sight by css) and switch focus to this and back:

onMouseDown={(e) => {
          e.preventDefault()
          document.getElementById('focusdummy').focus()
          editor.chain().focus().setColor('#70CFF8').run()
        }}

[jyee27]

You can also use ProseMirror's EditorView.focus() to work around this without needing a dummy input:

onClick={e => {
   e.preventDefault();
   editor.view.focus();
   // button logic here
}}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.