Autofocus search and fix bugs

Signed-off-by: Tulir Asokan <tulir@maunium.net>

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() {

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}
+                <input autoFocus type="text" placeholder="Search" value={this.props.query}
-                    onChange={ev => this.props.onChange(ev.target.value)}/>
+                    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()}

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 = {