onClickOutside is called even when user clicks inside Picker

Author: harastaivanCreated May 27, 2024Updated Feb 11, 2026

When using '@emoji-mart/react' Picker onClickOutside callback is called every time user clicks anything, even when we click inside the Picker component.

First I tried to not use onClickOutside prop at all.

I tried these hooks:

uidotdev/usehooks useClickAway
ahooks useClickAway

Tried to pass ref to

the parent component where picker is rendered
to Picker's pickerRef

Only workaround I could find was wrapping the Picker onClickOutside prop.

typescript

import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react';

export interface EmojiPickerProps {
    onEmojiSelect: (emoji: Emoji) => void;
    onClickOutside: (event: PointerEvent) => void;
}

export const EmojiPicker = (props: EmojiPickerProps) => {
    return (
        <Picker
            data={data}
            {...props}
            onClickOutside={(event: PointerEvent) => {
                // Note: onClickOutside is called even when user clicks inside Picker

                const emojiPicker = document.querySelector('em-emoji-picker');
                const clickedInsideEmojiPicker = event.composedPath().includes(emojiPicker!);

                if (!clickedInsideEmojiPicker) {
                    props.onClickOutside(event);
                }
            }}
        />
    );
};

Why did previous attempts didn't work, does it relate to Shadow DOM rendering?

Source: missive/emoji-mart

View original on GitHub View discussion on GitHub