From aa86cf955755cd05ed9c274daebbec248c39d863 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 16 Feb 2022 21:44:47 +0100
Subject: [PATCH] Fix opening the emoji picker scrolling the single-column view
to the top (#17579)
Fixes #17577
---
.../compose/components/emoji_picker_dropdown.js | 15 +++++++++++++--
1 file changed, 13 insertions(+), 2 deletions(-)
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
index 4a87714e6..f433e4de9 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
@@ -170,7 +170,7 @@ class EmojiPickerMenu extends React.PureComponent {
state = {
modifierOpen: false,
- placement: null,
+ readyToFocus: false,
};
handleDocumentClick = e => {
@@ -182,6 +182,16 @@ class EmojiPickerMenu extends React.PureComponent {
componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+
+ // Because of https://github.com/react-bootstrap/react-bootstrap/issues/2614 we need
+ // to wait for a frame before focusing
+ requestAnimationFrame(() => {
+ this.setState({ readyToFocus: true });
+ if (this.node) {
+ const element = this.node.querySelector('input[type="search"]');
+ if (element) element.focus();
+ }
+ });
}
componentWillUnmount () {
@@ -281,7 +291,7 @@ class EmojiPickerMenu extends React.PureComponent {
showSkinTones={false}
backgroundImageFn={backgroundImageFn}
notFound={notFoundFn}
- autoFocus
+ autoFocus={this.state.readyToFocus}
emojiTooltip
/>
@@ -314,6 +324,7 @@ class EmojiPickerDropdown extends React.PureComponent {
state = {
active: false,
loading: false,
+ placement: null,
};
setRef = (c) => {