search

sjdemartini / mui-tiptap

A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
MIT License
319 stars 43 forks source link

Color Picker not working with shadow dom #176

Closed B4CKSL4SH-44 closed 1 year ago

B4CKSL4SH-44 commented 1 year ago

Describe the bug

Everything was working fine so far, because useRef is used for the components. But the color picker buttton works with event.currentTarget, which isn't accessible in the shadow dom. Any idea how i can solve that?

To Reproduce

` <MenuButton onClick={(e) => anchorEl ? handleClose() : setAnchorEl(e.currentTarget) } aria-describedby={popperId} {...otherMenuButtonProps}

`

Steps to reproduce the behavior:

  1. When implementing MenuButtonTextColor or MenuButtonHighlightColor in shadow dom, the color picker wont appear

System (please complete the following information):

sjdemartini commented 1 year ago

@simon-schuster44 as mentioned in https://github.com/sjdemartini/mui-tiptap/issues/177#issuecomment-1791300215, I'm not very familiar with shadow dom usage with React components. Would you be able to provide a CodeSandbox example that illustrates the problem?

B4CKSL4SH-44 commented 1 year ago

Update: The MuiPopper comes with a z-Index of three, which let him hide behind my page. I set it to 999 and now everything works fine. It was always there, I'm kinda ashamed now :D

sjdemartini commented 1 year ago

@simon-schuster44 Great, glad you were able to figure it out! Thanks for following up and closing the issue