lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
Fix emoji picker position (#7146)
authored by
Eric Bailey
and committed by
GitHub
a07949ec
65d4416f
+37
-34
+37
-34
src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+37
-34
src/view/com/composer/text-input/web/EmojiPicker.web.tsx
···
10
10
11
11
import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
12
12
import {atoms as a} from '#/alf'
13
+
import {Portal} from '#/components/Portal'
13
14
14
15
const HEIGHT_OFFSET = 40
15
16
const WIDTH_OFFSET = 100
···
125
126
}
126
127
127
128
return (
128
-
<TouchableWithoutFeedback
129
-
accessibilityRole="button"
130
-
onPress={onPressBackdrop}
131
-
accessibilityViewIsModal>
132
-
<View
133
-
style={[
134
-
a.fixed,
135
-
a.w_full,
136
-
a.h_full,
137
-
a.align_center,
138
-
{
139
-
top: 0,
140
-
left: 0,
141
-
right: 0,
142
-
},
143
-
]}>
144
-
{/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
145
-
<TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
146
-
<View style={[{position: 'absolute'}, position]}>
147
-
<DismissableLayer
148
-
onFocusOutside={evt => evt.preventDefault()}
149
-
onDismiss={close}>
150
-
<Picker
151
-
data={async () => {
152
-
return (await import('./EmojiPickerData.json')).default
153
-
}}
154
-
onEmojiSelect={onInsert}
155
-
autoFocus={true}
156
-
/>
157
-
</DismissableLayer>
158
-
</View>
159
-
</TouchableWithoutFeedback>
160
-
</View>
161
-
</TouchableWithoutFeedback>
129
+
<Portal>
130
+
<TouchableWithoutFeedback
131
+
accessibilityRole="button"
132
+
onPress={onPressBackdrop}
133
+
accessibilityViewIsModal>
134
+
<View
135
+
style={[
136
+
a.fixed,
137
+
a.w_full,
138
+
a.h_full,
139
+
a.align_center,
140
+
{
141
+
top: 0,
142
+
left: 0,
143
+
right: 0,
144
+
},
145
+
]}>
146
+
{/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
147
+
<TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
148
+
<View style={[{position: 'absolute'}, position]}>
149
+
<DismissableLayer
150
+
onFocusOutside={evt => evt.preventDefault()}
151
+
onDismiss={close}>
152
+
<Picker
153
+
data={async () => {
154
+
return (await import('./EmojiPickerData.json')).default
155
+
}}
156
+
onEmojiSelect={onInsert}
157
+
autoFocus={true}
158
+
/>
159
+
</DismissableLayer>
160
+
</View>
161
+
</TouchableWithoutFeedback>
162
+
</View>
163
+
</TouchableWithoutFeedback>
164
+
</Portal>
162
165
)
163
166
}