From abd7bf37f44f37dc69bbf1b391b7587b8e3d5091 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 28 Sep 2020 15:56:22 +0100
Subject: [PATCH] Choose first result on enter in the emoji picker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/emojipicker/EmojiPicker.tsx         | 20 ++++++++++++++++---
 src/components/views/emojipicker/Search.tsx   | 11 ++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index 3aa6b109b2..bf0481c51c 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -52,7 +52,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
     private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;
     private readonly categories: ICategory[];
 
-    private bodyRef = React.createRef<HTMLElement>();
+    private bodyRef = React.createRef<HTMLDivElement>();
 
     constructor(props) {
         super(props);
@@ -190,6 +190,13 @@ class EmojiPicker extends React.Component<IProps, IState> {
         setTimeout(this.updateVisibility, 0);
     };
 
+    private onEnterFilter = () => {
+        const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item");
+        if (btn) {
+            btn.click();
+        }
+    };
+
     private onHoverEmoji = (emoji: IEmoji) => {
         this.setState({
             previewEmoji: emoji,
@@ -220,8 +227,15 @@ class EmojiPicker extends React.Component<IProps, IState> {
         return (
             <div className="mx_EmojiPicker">
                 <Header categories={this.categories} onAnchorClick={this.scrollToCategory} />
-                <Search query={this.state.filter} onChange={this.onChangeFilter} />
-                <AutoHideScrollbar className="mx_EmojiPicker_body" wrappedRef={this.bodyRef} onScroll={this.onScroll}>
+                <Search query={this.state.filter} onChange={this.onChangeFilter} onEnter={this.onEnterFilter} />
+                <AutoHideScrollbar
+                    className="mx_EmojiPicker_body"
+                    wrappedRef={ref => {
+                        // @ts-ignore - AutoHideScrollbar should accept a RefObject or fall back to its own instead
+                        this.bodyRef.current = ref
+                    }}
+                    onScroll={this.onScroll}
+                >
                     {this.categories.map(category => {
                         const emojis = this.memoizedDataByCategory[category.id];
                         const categoryElement = ((
diff --git a/src/components/views/emojipicker/Search.tsx b/src/components/views/emojipicker/Search.tsx
index 039fa476dc..fe1fecec7b 100644
--- a/src/components/views/emojipicker/Search.tsx
+++ b/src/components/views/emojipicker/Search.tsx
@@ -18,10 +18,12 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from '../../../languageHandler';
+import {Key} from "../../../Keyboard";
 
 interface IProps {
     query: string;
     onChange(value: string): void;
+    onEnter(): void;
 }
 
 class Search extends React.PureComponent<IProps> {
@@ -32,6 +34,14 @@ class Search extends React.PureComponent<IProps> {
         setTimeout(() => this.inputRef.current.focus(), 0);
     }
 
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        if (ev.key === Key.ENTER) {
+            this.props.onEnter();
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    };
+
     render() {
         let rightButton;
         if (this.props.query) {
@@ -54,6 +64,7 @@ class Search extends React.PureComponent<IProps> {
                     placeholder="Search"
                     value={this.props.query}
                     onChange={ev => this.props.onChange(ev.target.value)}
+                    onKeyDown={this.onKeyDown}
                     ref={this.inputRef}
                 />
                 {rightButton}