Send message when pressing enter in the emoji picker

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];

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}

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<string>;
@@ -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<HTMLButtonElement>) => {
-          const { shortName } = e.currentTarget.dataset;
-          if (shortName) {
-            onPickEmoji({ skinTone: selectedTone, shortName });
+        (
+          e:
+            | React.MouseEvent<HTMLButtonElement>
+            | React.KeyboardEvent<HTMLButtonElement>
+        ) => {
+          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(
               <button
                 className="module-emoji-picker__button"
                 onClick={handlePickEmoji}
+                onKeyDown={handlePickEmoji}
                 data-short-name={shortName}
                 title={shortName}
               >