Open harastaivan opened 4 months ago
When using '@emoji-mart/react' Picker onClickOutside callback is called every time user clicks anything, even when we click inside the Picker component.
'@emoji-mart/react' Picker
onClickOutside
First I tried to not use onClickOutside prop at all.
I tried these hooks:
useClickAway
Tried to pass ref to
Picker
pickerRef
Only workaround I could find was wrapping the Picker onClickOutside prop.
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?
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:
useClickAway
useClickAway
Tried to pass ref to
Picker
'spickerRef
Only workaround I could find was wrapping the Picker
onClickOutside
prop.Why did previous attempts didn't work, does it relate to Shadow DOM rendering?