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