lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
Fix emoji reaction expanded picker on web getting squished (#8245)
* ensure expanded emoji picker doesn't get squished
* reset expanded state on close
samuel.fm
+20
-4
+20
-4
src/components/dms/EmojiReactionPicker.web.tsx
+20
-4
src/components/dms/EmojiReactionPicker.web.tsx
···
33
33
return (
34
34
<Menu.Root>
35
35
<Menu.Trigger label={_(msg`Add emoji reaction`)}>{children}</Menu.Trigger>
36
-
<Menu.Outer>
37
-
<MenuInner message={message} onEmojiSelect={onEmojiSelect} />
38
-
</Menu.Outer>
36
+
<MenuInner message={message} onEmojiSelect={onEmojiSelect} />
39
37
</Menu.Root>
40
38
)
41
39
}
···
55
53
56
54
const [expanded, setExpanded] = useState(false)
57
55
56
+
const [prevOpen, setPrevOpen] = useState(control.isOpen)
57
+
58
+
if (control.isOpen !== prevOpen) {
59
+
setPrevOpen(control.isOpen)
60
+
if (!control.isOpen) {
61
+
setExpanded(false)
62
+
}
63
+
}
64
+
58
65
const handleEmojiPickerResponse = (emoji: Emoji) => {
59
66
handleEmojiSelect(emoji.native)
60
67
}
···
67
74
const limitReacted = hasReachedReactionLimit(message, currentAccount?.did)
68
75
69
76
return expanded ? (
70
-
<EmojiPicker onEmojiSelect={handleEmojiPickerResponse} autoFocus={true} />
77
+
<DropdownMenu.Portal>
78
+
<DropdownMenu.Content
79
+
sideOffset={5}
80
+
collisionPadding={{left: 5, right: 5, bottom: 5}}>
81
+
<EmojiPicker
82
+
onEmojiSelect={handleEmojiPickerResponse}
83
+
autoFocus={true}
84
+
/>
85
+
</DropdownMenu.Content>
86
+
</DropdownMenu.Portal>
71
87
) : (
72
88
<Menu.Outer style={[a.rounded_full]}>
73
89
<View style={[a.flex_row, a.gap_xs]}>