search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.73k stars 2.3k forks source link

appendTo to document.body makes BubbleMenu noninteractive #2292

Closed tkulpa closed 2 years ago

tkulpa commented 2 years ago

What’s the bug you are facing?

Adding tippyOptions={{ appendTo: () => document.body }} to BubbleMenu causes that BubbleMenu buttons become unclickable and I need tippy to be portaled outside of parent

How can we reproduce the bug on our side?

See CodeSandbox below

Can you provide a CodeSandbox?

https://codesandbox.io/s/tiptap-react-editor-forked-umehj

What did you expect to happen?

Things inside BubbleMenu after it being appended to body is still clickable

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

philippkuehn commented 2 years ago

This is not supported because rendering an element outside of the react scope breaks interactivity. this is a limitation of react.

sjdemartini commented 2 years ago

fyi @tkulpa I have an alternate BubbleMenu component example here https://github.com/ueberdosis/tiptap/issues/2305#issuecomment-1020665146 which is relatively simple but uses a Portal so should presumably work for your use-case.