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

[SahilSetia2512]

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:

Thank you!

[ryanseddon]

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.

[SahilSetia2512]

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.

Can you please give permission to access code sandbox

[ryanseddon]

Try now,