diff options
| author | Samuel Newman <mozzius@protonmail.com> | 2025-05-19 20:03:01 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-05-19 10:03:01 -0700 |
| commit | 29de23bbae85e768b0978179c24e215c8f4418ba (patch) | |
| tree | a0202f91594ba83c259395d9cec1a4a42708a2be /src | |
| parent | ca6c96f50978a3cf1eb240479baeaf7df0c0fed6 (diff) | |
| download | voidsky-29de23bbae85e768b0978179c24e215c8f4418ba.tar.zst | |
Fix emoji reaction expanded picker on web getting squished (#8245)
* ensure expanded emoji picker doesn't get squished * reset expanded state on close
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/dms/EmojiReactionPicker.web.tsx | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/src/components/dms/EmojiReactionPicker.web.tsx b/src/components/dms/EmojiReactionPicker.web.tsx index cdd3ce414..4dabfc7df 100644 --- a/src/components/dms/EmojiReactionPicker.web.tsx +++ b/src/components/dms/EmojiReactionPicker.web.tsx @@ -33,9 +33,7 @@ export function EmojiReactionPicker({ return ( <Menu.Root> <Menu.Trigger label={_(msg`Add emoji reaction`)}>{children}</Menu.Trigger> - <Menu.Outer> - <MenuInner message={message} onEmojiSelect={onEmojiSelect} /> - </Menu.Outer> + <MenuInner message={message} onEmojiSelect={onEmojiSelect} /> </Menu.Root> ) } @@ -55,6 +53,15 @@ function MenuInner({ const [expanded, setExpanded] = useState(false) + const [prevOpen, setPrevOpen] = useState(control.isOpen) + + if (control.isOpen !== prevOpen) { + setPrevOpen(control.isOpen) + if (!control.isOpen) { + setExpanded(false) + } + } + const handleEmojiPickerResponse = (emoji: Emoji) => { handleEmojiSelect(emoji.native) } @@ -67,7 +74,16 @@ function MenuInner({ const limitReacted = hasReachedReactionLimit(message, currentAccount?.did) return expanded ? ( - <EmojiPicker onEmojiSelect={handleEmojiPickerResponse} autoFocus={true} /> + <DropdownMenu.Portal> + <DropdownMenu.Content + sideOffset={5} + collisionPadding={{left: 5, right: 5, bottom: 5}}> + <EmojiPicker + onEmojiSelect={handleEmojiPickerResponse} + autoFocus={true} + /> + </DropdownMenu.Content> + </DropdownMenu.Portal> ) : ( <Menu.Outer style={[a.rounded_full]}> <View style={[a.flex_row, a.gap_xs]}> |