make sure click events on the emoji picker don't bubble up to the mask (#1427)

zio/stable
Ansh 2023-09-12 02:01:14 +05:30 committed by GitHub
parent bcd63e710c
commit 27cb1bd276
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 15 deletions

View File

@ -58,21 +58,27 @@ export function EmojiPicker({close}: {close: () => void}) {
// eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
<TouchableWithoutFeedback onPress={close} accessibilityViewIsModal> <TouchableWithoutFeedback onPress={close} accessibilityViewIsModal>
<View style={styles.mask}> <View style={styles.mask}>
<View {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
style={[ <TouchableWithoutFeedback
styles.picker, onPress={e => {
{ e.stopPropagation() // prevent event from bubbling up to the mask
paddingTop: noPadding ? 0 : reducedPadding ? 150 : 325, }}>
display: noPicker ? 'none' : 'flex', <View
}, style={[
]}> styles.picker,
<Picker {
// @ts-ignore we set emojiMartData in `emoji-mart-data.js` file paddingTop: noPadding ? 0 : reducedPadding ? 150 : 325,
data={window.emojiMartData} display: noPicker ? 'none' : 'flex',
onEmojiSelect={onInsert} },
autoFocus={false} ]}>
/> <Picker
</View> // @ts-ignore we set emojiMartData in `emoji-mart-data.js` file
data={window.emojiMartData}
onEmojiSelect={onInsert}
autoFocus={false}
/>
</View>
</TouchableWithoutFeedback>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
) )