Fix opening the emoji picker scrolling the single-column view to the top (#17579)

Fixes #17577
main
Claire 2022-02-16 21:44:47 +01:00 committed by GitHub
parent 00b45b967e
commit aa86cf9557
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 2 deletions

View File

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