monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix emoji picker placement on limited-height viewports (#29651)

This commit is contained in:
Claire 2024-03-20 12:07:02 +01:00 committed by GitHub
parent e36e7ea243
commit 94f7ae192b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
View File

@ -330,6 +330,7 @@ class EmojiPickerDropdown extends PureComponent {
state = { state = {
active: false, active: false,
loading: false, loading: false,
placement: 'bottom',
}; };
setRef = (c) => { setRef = (c) => {
@ -381,10 +382,14 @@ class EmojiPickerDropdown extends PureComponent {
return this.target; return this.target;
}; };
handleOverlayEnter = (state) => {
this.setState({ placement: state.placement });
};
render () { render () {
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props; const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
const title = intl.formatMessage(messages.emoji); const title = intl.formatMessage(messages.emoji);
const { active, loading } = this.state; const { active, loading, placement } = this.state;
return ( return (
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}> <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
@ -397,7 +402,7 @@ class EmojiPickerDropdown extends PureComponent {
inverted 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 })=> ( {({ props, placement })=> (
<div {...props} style={{ ...props.style }}> <div {...props} style={{ ...props.style }}>
<div className={`dropdown-animation ${placement}`}> <div className={`dropdown-animation ${placement}`}>