Skip to content

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

Closed
@mepeisen

Description

@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.

Activity

mepeisen

mepeisen commented on Sep 13, 2019

@mepeisen
Author

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

jonasdumas commented on Sep 22, 2019

@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

chrisjbrown commented on Sep 25, 2019

@chrisjbrown
Contributor

+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

cpauwels commented on Oct 3, 2019

@cpauwels

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

thylo

thylo commented on Oct 3, 2019

@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

jonasdumas commented on Oct 4, 2019

@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

philippkuehn commented on Oct 4, 2019

@philippkuehn
Contributor

@jonasdumas Great to hear that! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @mepeisen@thylo@chrisjbrown@philippkuehn@cpauwels

        Issue actions

          Select inside editor-menu-bar or editor-menu-bubble does not work · Issue #454 · ueberdosis/tiptap