izaliamae/glitch-soc
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[Glitch] Fix emoji picker placement on limited-height viewports

Browse source 
Port 94f7ae192b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2024-03-20 12:07:02 +01:00
parent 72baa1e5c3
commit 5e039b96c3
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/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
View file

@ -332,6 +332,7 @@ class EmojiPickerDropdown extends PureComponent {
state = {
active: false,
loading: false,
placement: 'bottom',
};
setRef = (c) => {
@ -383,10 +384,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}>
@ -399,7 +404,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}`}>