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

Fixes #17577
This commit is contained in:
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 = { state = {
modifierOpen: false, modifierOpen: false,
placement: null, readyToFocus: false,
}; };
handleDocumentClick = e => { handleDocumentClick = e => {
@ -182,6 +182,16 @@ class EmojiPickerMenu extends React.PureComponent {
componentDidMount () { componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); 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 () { componentWillUnmount () {
@ -281,7 +291,7 @@ class EmojiPickerMenu extends React.PureComponent {
showSkinTones={false} showSkinTones={false}
backgroundImageFn={backgroundImageFn} backgroundImageFn={backgroundImageFn}
notFound={notFoundFn} notFound={notFoundFn}
autoFocus autoFocus={this.state.readyToFocus}
emojiTooltip emojiTooltip
/> />
@ -314,6 +324,7 @@ class EmojiPickerDropdown extends React.PureComponent {
state = { state = {
active: false, active: false,
loading: false, loading: false,
placement: null,
}; };
setRef = (c) => { setRef = (c) => {