From 7acae6dc32b20cedd59a70978eae2e1a532743ca Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Tue, 15 Oct 2019 18:22:18 +0300
Subject: [PATCH] Autofocus search and fix bugs

Signed-off-by: Tulir Asokan <tulir@maunium.net>
---
 src/components/views/emojipicker/EmojiPicker.js   |  2 --
 src/components/views/emojipicker/Search.js        | 14 ++++++++++++--
 src/components/views/messages/MessageActionBar.js |  5 ++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/views/emojipicker/EmojiPicker.js b/src/components/views/emojipicker/EmojiPicker.js
index f5a977f930..d6d79d7b8c 100644
--- a/src/components/views/emojipicker/EmojiPicker.js
+++ b/src/components/views/emojipicker/EmojiPicker.js
@@ -142,8 +142,6 @@ class EmojiPicker extends React.Component {
         this.onClickEmoji = this.onClickEmoji.bind(this);
         this.scrollToCategory = this.scrollToCategory.bind(this);
         this.updateVisibility = this.updateVisibility.bind(this);
-
-        window.bodyRef = this.bodyRef;
     }
 
     updateVisibility() {
diff --git a/src/components/views/emojipicker/Search.js b/src/components/views/emojipicker/Search.js
index ca6a664763..19da7c2e6c 100644
--- a/src/components/views/emojipicker/Search.js
+++ b/src/components/views/emojipicker/Search.js
@@ -25,11 +25,21 @@ class Search extends React.PureComponent {
         onChange: PropTypes.func.isRequired,
     };
 
+    constructor(props) {
+        super(props);
+        this.inputRef = React.createRef();
+    }
+
+    componentDidMount() {
+        // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a setTimeout
+        setTimeout(() => this.inputRef.current.focus(), 0);
+    }
+
     render() {
         return (
             <div className="mx_EmojiPicker_search">
-                <input type="text" placeholder="Search" value={this.props.query}
-                    onChange={ev => this.props.onChange(ev.target.value)}/>
+                <input autoFocus type="text" placeholder="Search" value={this.props.query}
+                    onChange={ev => this.props.onChange(ev.target.value)} ref={this.inputRef}/>
                 <button onClick={() => this.props.onChange("")}
                     className={this.props.query ? "mx_EmojiPicker_search_clear" : ""}>
                     {this.props.query ? icons.search.delete() : icons.search.search()}
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index ca617112a3..48554d8cc0 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -90,11 +90,14 @@ export default class MessageActionBar extends React.PureComponent {
         const buttonRect = ev.target.getBoundingClientRect();
 
         const getReactions = () => {
+            if (!this.props.reactions) {
+                return [];
+            }
             const userId = MatrixClientPeg.get().getUserId();
             const myAnnotations = this.props.reactions.getAnnotationsBySender()[userId];
             return Object.fromEntries([...myAnnotations]
                 .filter(event => !event.isRedacted())
-                .map(event => [event.getRelation().key, event.getId()]))
+                .map(event => [event.getRelation().key, event.getId()]));
         };
 
         const menuOptions = {