Skin tone button does not work (React)

[shakedhagag]

Hi guys,
I think I'm missing something here but I have an issue where clicking the skin tone button does nothing.
I checked my DOM and compared it to this Demo and noticed that in my section tag the data-menu is not added when clicking on the skin tone button.
I'm suspecting it has something to do with the way I use ref.
[p.s - using the latest version]
This is my implementation, I wrap the Picker with my own component and I pass data as a props:

  const ref = useRef<HTMLDivElement>(null);

 const onEmojiSelect = useCallback(
    (emoji: Emoji) => {
      editor?.commands.insertContent(emoji.native);
    },
    [editor],
  );

  useEffect(() => {
    if (data) {
      // eslint-disable-next-line no-new
      new Picker({
        previewPosition: 'none',
        data,
        ref,
        i18n,
        onEmojiSelect,
      });
    }
  }, [data, i18n, onEmojiSelect, ref]);

  // Use ReactFocusLock instead of FloatingFocusManager because Emoji Picker is based on shadow dom and
  // FloatingFocusManager doesn't support it
  return (
    <ReactFocusLock>
      <div ref={ref} className={classNames(styles.container, { [styles.hidden]: !isDataLoaded })} />
      {!isDataLoaded && (
        <div className={styles.container}>
          <Spinner size="large" />
        </div>
      )}
    </ReactFocusLock>
  );

Any ideas? 🙏

[yasseralsaidi]

same here any fix?

[Baruchma01]

The issue arises from a nested shadow root. The solution involves adding event.stopPropagation() to the ref. For example:

<div
  ref={ref}
  className={classNames(styles.container, { [styles.hidden]: !isDataLoaded })}
  // Prevents the editor from losing focus and loading the emoji skin tone picker
  onClick={event => event.stopPropagation()}
/>

This modification ensures that the click event does not propagate further, thereby maintaining focus in the editor and preventing unintended behavior with the emoji skin tone picker.
@shakedhagag @yasseralsaidi