diff options
| author | Claire <claire.github-309c@sitedethib.com> | 2024-03-20 12:07:02 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-20 11:07:02 +0000 |
| commit | 94f7ae192b8df4f0a8846249016268f914b730bb (patch) | |
| tree | d429abc9a28bdbdd7fff38e21354be4349fa27d5 | |
| parent | e36e7ea2432104d2e72ab71f1aa5d2d4ca5ad3c8 (diff) | |
Fix emoji picker placement on limited-height viewports (#29651)
| -rw-r--r-- | app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx index acc3fd0ce51..43795d030fa 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx +++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx @@ -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}`}> |