Fix emoji picker placement on limited-height viewports (#29651)
This commit is contained in:
parent
e36e7ea243
commit
94f7ae192b
@ -330,6 +330,7 @@ class EmojiPickerDropdown extends PureComponent {
|
||||
state = {
|
||||
active: false,
|
||||
loading: false,
|
||||
placement: 'bottom',
|
||||
};
|
||||
|
||||
setRef = (c) => {
|
||||
@ -381,10 +382,14 @@ class EmojiPickerDropdown extends PureComponent {
|
||||
return this.target;
|
||||
};
|
||||
|
||||
handleOverlayEnter = (state) => {
|
||||
this.setState({ placement: state.placement });
|
||||
};
|
||||
|
||||
render () {
|
||||
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
|
||||
const title = intl.formatMessage(messages.emoji);
|
||||
const { active, loading } = this.state;
|
||||
const { active, loading, placement } = this.state;
|
||||
|
||||
return (
|
||||
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
|
||||
@ -397,7 +402,7 @@ class EmojiPickerDropdown extends PureComponent {
|
||||
inverted
|
||||
/>
|
||||
|
||||
<Overlay show={active} placement={'bottom'} target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
|
||||
<Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
|
||||
{({ props, placement })=> (
|
||||
<div {...props} style={{ ...props.style }}>
|
||||
<div className={`dropdown-animation ${placement}`}>
|
||||
|
Loading…
Reference in New Issue
Block a user