From aa86cf955755cd05ed9c274daebbec248c39d863 Mon Sep 17 00:00:00 2001 From: Claire 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 4a87714e644..f433e4de9fa 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) => {