EmojiPicker: Enter adds emoji in keyboard mode, otherwise dismisses

This commit is contained in:
Scott Nonnenberg 2024-03-19 06:23:31 -07:00 committed by GitHub
parent 28eaf1689f
commit 9533796c81
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 72 additions and 15 deletions

View file

@ -57,6 +57,8 @@ export const EmojiButton = React.memo(function EmojiButtonInner({
const isRTL = i18n.getLocaleDirection() === 'rtl';
const [open, setOpen] = React.useState(false);
const [wasInvokedFromKeyboard, setWasInvokedFromKeyboard] =
React.useState(false);
const buttonRef = React.useRef<HTMLButtonElement | null>(null);
const popperRef = React.useRef<HTMLDivElement | null>(null);
const refMerger = useRefMerger();
@ -69,25 +71,30 @@ export const EmojiButton = React.memo(function EmojiButtonInner({
}, [open, onOpen]);
const handleClickButton = React.useCallback(() => {
setWasInvokedFromKeyboard(false);
if (open) {
setOpen(false);
} else {
setOpen(true);
}
}, [open, setOpen]);
}, [open, setOpen, setWasInvokedFromKeyboard]);
const handleClose = React.useCallback(() => {
setOpen(false);
setWasInvokedFromKeyboard(false);
if (onClose) {
onClose();
}
}, [setOpen, onClose]);
}, [setOpen, setWasInvokedFromKeyboard, onClose]);
const api = React.useMemo(
() => ({
close: () => setOpen(false),
close: () => {
setOpen(false);
setWasInvokedFromKeyboard(false);
},
}),
[setOpen]
[setOpen, setWasInvokedFromKeyboard]
);
if (emojiButtonApi) {
@ -132,6 +139,7 @@ export const EmojiButton = React.memo(function EmojiButtonInner({
event.stopPropagation();
event.preventDefault();
setWasInvokedFromKeyboard(true);
setOpen(!open);
}
};
@ -180,6 +188,7 @@ export const EmojiButton = React.memo(function EmojiButtonInner({
onClose={handleClose}
skinTone={skinTone}
onSetSkinTone={onSetSkinTone}
wasInvokedFromKeyboard={wasInvokedFromKeyboard}
recentEmojis={recentEmojis}
/>
)}