Select inside editor-menu-bar or editor-menu-bubble does not work

[mepeisen]

Placing a simple select inside menu bar oder menu bubble does not work. It shows up but any click seems to be filtered by something (maybe the editor?) So you cannot choose any options from select.

[mepeisen]

After debugging a while I got into following lines:
https://github.com/scrumpy/tiptap/blob/de29399e1c351659e009f51078bcff5ec62431f4/packages/tiptap/src/Plugins/MenuBar.js#L13
https://github.com/scrumpy/tiptap/blob/3fee68b692ab4a175f62acb55e76b563473f5192/packages/tiptap/src/Plugins/MenuBubble.js#L83

Adding some small hack, solves the problem.
if (event.srcElement && event.srcElement.localName != 'select') event.preventDefault(); }

However this is not the real solution

[jonasdumas]

I got the same problem with input field and it seems to come from the same behavior described before by @mepeisen with his select. Inside the "links" example here: https://tiptap.scrumpy.io/links
=> When adding a link, it's not possible to select a part of the text or even, click in the middle of the text link to correct a misspelling. There's the preventDefault which always place the cursor at the end of the text.

I've made few test with different inputs, and as soon as the input is inside the MenuBubble component, there's this preventDefault behavior.

What would be the best solution to remove this preventDefault on inner fields ?

[chrisjbrown]

+1 having the same issue as @jonasdumas

Would like to be able to select text or move the cursor inside the input of the link component but the event is being prevented

[cpauwels]

+1 having the same issue as well... 😔 Any fix planned?

[thylo]

I managed to avoid the problem by not wrapping my menu with the EditorMenuBar and directly accessing commands, isActive and getMarkAttrs via the editor variable.

Like so :

get commands() {
    return this.editor.commands;
  }
  get isActive() {
    return this.editor.isActive;
  }
  getMarkAttrs(value) {
    return this.editor.getMarkAttrs(value);
  }

It does not solve the problem , but at least you can have MouseEvents on your menu's inputs ;-)

[jonasdumas]

Thank you @philippkuehn for your last commits, it solved this issue for us!
I profit from this message to thank you for your amazing TipTap library. We're fan here !

[philippkuehn]

@jonasdumas Great to hear that! 🙏