search

ryanseddon / react-frame-component

Render your React app to an iFrame
http://ryanseddon.github.io/react-frame-component/
MIT License
1.75k stars 156 forks source link

Emoji-mart not working in firefox browser when rendered inside Frame(react-frame-component) #257

Open SahilSetia2512 opened 3 months ago

SahilSetia2512 commented 3 months ago

Hello,

Thank you for creating and maintaining this package!

Emoji-mart is not working in the Firefox browser when rendered inside Frame(react-frame-component). Without wrapping it inside the Frame, it works fine.

Codesandbox link: https://codesandbox.io/p/devbox/emoji-mart-firefox-issue-myzwxx?file=%2Fsrc%2FApp.tsx%3A15%2C32

Preview link: https://myzwxx-5173.csb.app/

Issue: image

Thank you!

ryanseddon commented 1 week ago

So I think this might be something to do with the web component that emoji mart creates, as inside the iframe the custom element doesn't exist so it throws on the setShadow class method.

I did a test case of a custom element outside and inside the Frame and you can see that the one inside doesn't actually call the class.

https://codesandbox.io/p/sandbox/ck743h?file=%2Fsrc%2FApp.tsx%3A14%2C2

I'm unsure how this is even working in Chrome as chrome doesn't upgrade the <my-thing> when inside the Frame.

When I step through the code this is Window and not the custom element.