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