You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using '@emoji-mart/react' PickeronClickOutside 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.
Only workaround I could find was wrapping the Picker onClickOutside prop.
importdatafrom'@emoji-mart/data';importPickerfrom'@emoji-mart/react';exportinterfaceEmojiPickerProps{onEmojiSelect: (emoji: Emoji)=>void;onClickOutside: (event: PointerEvent)=>void;}exportconstEmojiPicker=(props: EmojiPickerProps)=>{return(<Pickerdata={data}{...props}onClickOutside={(event: PointerEvent)=>{// Note: onClickOutside is called even when user clicks inside PickerconstemojiPicker=document.querySelector('em-emoji-picker');constclickedInsideEmojiPicker=event.composedPath().includes(emojiPicker!);if(!clickedInsideEmojiPicker){props.onClickOutside(event);}}}/>);};
Why did previous attempts didn't work, does it relate to Shadow DOM rendering?
The text was updated successfully, but these errors were encountered:
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?
The text was updated successfully, but these errors were encountered: