Fix #1328 fix emoji picker scroll on firefox and chrome (#1332)

* fix emoji picker scroll on firefox and chrome

* click outside emoji picker to dismiss

* dynamically position emoji picker

* dynamically placing picker

1 files changed, 36 insertions, 16 deletions

diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
index 6c7d890a4..a0d1f67d6 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import Picker from '@emoji-mart/react'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {textInputWebEmitter} from '../TextInput.web'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useMediaQuery} from 'react-responsive'
 
 export type Emoji = {
   aliases?: string[]
@@ -23,6 +24,9 @@ export function EmojiPickerButton() {
   const onOpenChange = (o: boolean) => {
     setOpen(o)
   }
+  const close = () => {
+    setOpen(false)
+  }
 
   return (
     <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
@@ -35,13 +39,7 @@ export function EmojiPickerButton() {
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          <EmojiPicker
-            close={() => {
-              setOpen(false)
-            }}
-          />
-        </DropdownMenu.Content>
+        <EmojiPicker close={close} />
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
   )
@@ -52,15 +50,31 @@ export function EmojiPicker({close}: {close: () => void}) {
     textInputWebEmitter.emit('emoji-inserted', emoji)
     close()
   }
+  const reducedPadding = useMediaQuery({query: '(max-height: 750px)'})
+  const noPadding = useMediaQuery({query: '(max-height: 550px)'})
+  const noPicker = useMediaQuery({query: '(max-height: 350px)'})
+
   return (
-    <View style={styles.mask}>
-      <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={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>
+      </View>
+    </TouchableWithoutFeedback>
   )
 }
 
@@ -70,6 +84,8 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
+    width: '100%',
+    height: '100%',
   },
   trigger: {
     backgroundColor: 'transparent',
@@ -78,4 +94,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     cursor: 'pointer',
   },
+  picker: {
+    marginHorizontal: 'auto',
+    paddingRight: 50,
+  },
 })