diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 53d2831cb0c6..f293f4e04373 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -318,6 +318,9 @@ setupEmojiPickerButton() { const props = { + onForceSend: () => { + this.sendMessage({}); + }, onPickEmoji: e => this.insertEmoji(e), onClose: () => { const textarea = this.$messageField[0]; diff --git a/ts/components/emoji/EmojiButton.tsx b/ts/components/emoji/EmojiButton.tsx index d25b4b55f675..431c556677a8 100644 --- a/ts/components/emoji/EmojiButton.tsx +++ b/ts/components/emoji/EmojiButton.tsx @@ -13,13 +13,19 @@ export type OwnProps = { export type Props = OwnProps & Pick< EmojiPickerProps, - 'onClose' | 'onPickEmoji' | 'skinTone' | 'onSetSkinTone' | 'recentEmojis' + | 'onClose' + | 'onForceSend' + | 'onPickEmoji' + | 'skinTone' + | 'onSetSkinTone' + | 'recentEmojis' >; export const EmojiButton = React.memo( ({ i18n, onClose, + onForceSend, onPickEmoji, skinTone, onSetSkinTone, @@ -98,6 +104,7 @@ export const EmojiButton = React.memo( i18n={i18n} style={style} onPickEmoji={onPickEmoji} + onForceSend={onForceSend} onClose={handleClose} skinTone={skinTone} onSetSkinTone={onSetSkinTone} diff --git a/ts/components/emoji/EmojiPicker.tsx b/ts/components/emoji/EmojiPicker.tsx index ece3e5cc02c8..c4bfca96541c 100644 --- a/ts/components/emoji/EmojiPicker.tsx +++ b/ts/components/emoji/EmojiPicker.tsx @@ -22,6 +22,7 @@ import { LocalizerType } from '../../types/Util'; export type OwnProps = { readonly i18n: LocalizerType; readonly onPickEmoji: (o: { skinTone: number; shortName: string }) => unknown; + readonly onForceSend: () => unknown; readonly skinTone: number; readonly onSetSkinTone: (tone: number) => unknown; readonly recentEmojis: Array; @@ -56,6 +57,7 @@ export const EmojiPicker = React.memo( ( { i18n, + onForceSend, onPickEmoji, skinTone = 0, onSetSkinTone, @@ -113,13 +115,24 @@ export const EmojiPicker = React.memo( ); const handlePickEmoji = React.useCallback( - (e: React.MouseEvent) => { - const { shortName } = e.currentTarget.dataset; - if (shortName) { - onPickEmoji({ skinTone: selectedTone, shortName }); + ( + e: + | React.MouseEvent + | React.KeyboardEvent + ) => { + if ('key' in e) { + if (e.key === 'Enter') { + e.preventDefault(); + onForceSend(); + } + } else { + const { shortName } = e.currentTarget.dataset; + if (shortName) { + onPickEmoji({ skinTone: selectedTone, shortName }); + } } }, - [onClose, onPickEmoji, selectedTone] + [onClose, onForceSend, onPickEmoji, selectedTone] ); // Handle escape key @@ -229,6 +242,7 @@ export const EmojiPicker = React.memo(