Fix emoji state

src/components/Emojis/Button.tsx

@@ -9,18 +9,19 @@ const EmojisButton: React.FC = () => {
   const { colors } = useTheme()
   const { emojisState, emojisDispatch } = useContext(EmojisContext)
 
+  const focusedPropsIndex = emojisState.inputProps?.findIndex(props => props.isFocused.current)
+  if (focusedPropsIndex === -1) {
+    return null
+  }
+
   return (
     <Pressable
       disabled={!emojisState.emojis || !emojisState.emojis.length}
       onPress={() => {
-        const targetProps = emojisState.inputProps?.find(props => props.ref.current?.isFocused())
-        if (!targetProps) {
-          return
-        }
-        if (emojisState.targetProps === null) {
+        if (emojisState.targetIndex === -1) {
           Keyboard.dismiss()
         }
-        emojisDispatch({ type: 'target', payload: targetProps })
+        emojisDispatch({ type: 'target', payload: focusedPropsIndex })
       }}
       hitSlop={StyleConstants.Spacing.S}
       style={{

src/components/Emojis/List.tsx

@@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { chunk } from 'lodash'
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   AccessibilityInfo,
@@ -21,191 +21,188 @@ import FastImage from 'react-native-fast-image'
 import validUrl from 'valid-url'
 import EmojisContext from './helpers/EmojisContext'
 
-const EmojisList = React.memo(
-  () => {
-    const dispatch = useAppDispatch()
-    const { reduceMotionEnabled } = useAccessibility()
-    const { t } = useTranslation()
+const EmojisList = () => {
+  const dispatch = useAppDispatch()
+  const { reduceMotionEnabled } = useAccessibility()
+  const { t } = useTranslation()
 
-    const { emojisState } = useContext(EmojisContext)
-    const { colors, mode } = useTheme()
+  const { emojisState } = useContext(EmojisContext)
+  const { colors, mode } = useTheme()
 
-    const addEmoji = (shortcode: string) => {
-      if (!emojisState.targetProps) {
-        return
-      }
-
-      const inputValue = emojisState.targetProps.value
-      const maxLength = emojisState.targetProps.maxLength
-      const selectionRange = emojisState.targetProps.selectionRange || {
-        start: emojisState.targetProps.value.length,
-        end: emojisState.targetProps.value.length
-      }
-
-      if (inputValue?.length) {
-        const contentFront = inputValue.slice(0, selectionRange.start)
-        const contentRear = inputValue.slice(selectionRange.end)
-
-        const whiteSpaceRear = /\s/g.test(contentRear.slice(-1))
-
-        const newTextWithSpace = ` ${shortcode}${whiteSpaceRear ? '' : ' '}`
-        emojisState.targetProps.setValue(
-          [contentFront, newTextWithSpace, contentRear].join('').slice(0, maxLength)
-        )
-      } else {
-        emojisState.targetProps.setValue(`${shortcode} `.slice(0, maxLength))
-      }
+  const addEmoji = (shortcode: string) => {
+    if (emojisState.targetIndex === -1) {
+      return
     }
 
-    const listItem = useCallback(
-      ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
-        return (
-          <View
-            key={index}
-            style={{
-              flex: 1,
-              flexWrap: 'wrap',
-              marginTop: StyleConstants.Spacing.M,
-              marginRight: StyleConstants.Spacing.S
-            }}
-          >
-            {item.map(emoji => {
-              const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
-              if (validUrl.isHttpsUri(uri)) {
-                return (
-                  <Pressable
-                    key={emoji.shortcode}
-                    onPress={() => {
-                      addEmoji(`:${emoji.shortcode}:`)
-                      dispatch(countInstanceEmoji(emoji))
-                    }}
-                    style={{ padding: StyleConstants.Spacing.S }}
-                  >
-                    <FastImage
-                      accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
-                        emoji: emoji.shortcode
-                      })}
-                      accessibilityHint={t(
-                        'screenCompose:content.root.footer.emojis.accessibilityHint'
-                      )}
-                      source={{ uri }}
-                      style={{ width: 32, height: 32 }}
-                    />
-                  </Pressable>
-                )
-              } else {
-                return null
-              }
-            })}
-          </View>
-        )
-      },
-      [emojisState.targetProps]
+    const {
+      value: [value, setValue],
+      selection: [selection, setSelection],
+      ref,
+      maxLength
+    } = emojisState.inputProps[emojisState.targetIndex]
+
+    const contentFront = value.slice(0, selection.start)
+    const contentRear = value.slice(selection.end)
+
+    const spaceFront = /\s/g.test(contentFront.slice(-1)) ? '' : ' '
+    const spaceRear = /\s/g.test(contentRear[0]) ? '' : ' '
+
+    setValue(
+      [contentFront, spaceFront, shortcode, spaceRear, contentRear].join('').slice(0, maxLength)
     )
 
-    const listRef = useRef<SectionList>(null)
-    useEffect(() => {
-      const tagEmojis = findNodeHandle(listRef.current)
-      if (emojisState.targetProps) {
-        layoutAnimation()
-        tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
-      }
-    }, [emojisState.targetProps])
+    const addedLength = spaceFront.length + shortcode.length + spaceRear.length
 
-    const [search, setSearch] = useState('')
-    const searchLength = useRef(0)
-    useEffect(() => {
-      if (
-        (search.length === 0 && searchLength.current === 1) ||
-        (search.length === 1 && searchLength.current === 0)
-      ) {
-        layoutAnimation()
-      }
-      searchLength.current = search.length
-    }, [search.length, searchLength.current])
+    setSelection({ start: selection.start + addedLength })
+    ref?.current?.setNativeProps({
+      selection: { start: selection.start + addedLength }
+    })
+  }
 
-    return emojisState.targetProps ? (
+  const listItem = ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
+    return (
+      <View
+        key={index}
+        style={{
+          flex: 1,
+          flexWrap: 'wrap',
+          marginTop: StyleConstants.Spacing.M,
+          marginRight: StyleConstants.Spacing.S
+        }}
+      >
+        {item.map(emoji => {
+          const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
+          if (validUrl.isHttpsUri(uri)) {
+            return (
+              <Pressable
+                key={emoji.shortcode}
+                onPress={() => {
+                  addEmoji(`:${emoji.shortcode}:`)
+                  dispatch(countInstanceEmoji(emoji))
+                }}
+                style={{ padding: StyleConstants.Spacing.S }}
+              >
+                <FastImage
+                  accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
+                    emoji: emoji.shortcode
+                  })}
+                  accessibilityHint={t(
+                    'screenCompose:content.root.footer.emojis.accessibilityHint'
+                  )}
+                  source={{ uri }}
+                  style={{ width: 32, height: 32 }}
+                />
+              </Pressable>
+            )
+          } else {
+            return null
+          }
+        })}
+      </View>
+    )
+  }
+
+  const listRef = useRef<SectionList>(null)
+  useEffect(() => {
+    const tagEmojis = findNodeHandle(listRef.current)
+    if (emojisState.targetIndex !== -1) {
+      layoutAnimation()
+      tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
+    }
+  }, [emojisState.targetIndex])
+
+  const [search, setSearch] = useState('')
+  const searchLength = useRef(0)
+  useEffect(() => {
+    if (
+      (search.length === 0 && searchLength.current === 1) ||
+      (search.length === 1 && searchLength.current === 0)
+    ) {
+      layoutAnimation()
+    }
+    searchLength.current = search.length
+  }, [search.length, searchLength.current])
+
+  return emojisState.targetIndex !== -1 ? (
+    <View
+      style={{
+        paddingBottom: StyleConstants.Spacing.Global.PagePadding,
+        backgroundColor: colors.backgroundDefault
+      }}
+    >
       <View
         style={{
-          paddingBottom: StyleConstants.Spacing.Global.PagePadding,
-          backgroundColor: colors.backgroundDefault
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
+          paddingVertical: StyleConstants.Spacing.S
         }}
       >
         <View
           style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: StyleConstants.Spacing.Global.PagePadding,
-            paddingBottom: StyleConstants.Spacing.S
+            borderBottomWidth: 1,
+            borderBottomColor: colors.border,
+            alignSelf: 'stretch',
+            justifyContent: 'center',
+            paddingRight: StyleConstants.Spacing.S
           }}
         >
-          <View
-            style={{
-              borderBottomWidth: 1,
-              borderBottomColor: colors.border,
-              alignSelf: 'stretch',
-              justifyContent: 'center',
-              paddingRight: StyleConstants.Spacing.S
-            }}
-          >
-            <Icon name='Search' size={StyleConstants.Font.Size.L} color={colors.secondary} />
-          </View>
-          <TextInput
-            style={{
-              flex: 1,
-              borderBottomWidth: 1,
-              borderBottomColor: colors.border,
-              ...StyleConstants.FontStyle.M,
-              color: colors.primaryDefault,
-              paddingVertical: StyleConstants.Spacing.S
-            }}
-            onChangeText={setSearch}
-            autoCapitalize='none'
-            clearButtonMode='always'
-            keyboardAppearance={mode}
-            autoCorrect={false}
-            spellCheck={false}
-          />
+          <Icon name='Search' size={StyleConstants.Font.Size.L} color={colors.secondary} />
         </View>
-        <SectionList
-          accessible
-          ref={listRef}
-          horizontal
-          keyboardShouldPersistTaps='always'
-          sections={
-            search.length
-              ? [
-                  {
-                    title: 'Search result',
-                    data: chunk(
-                      emojisState.emojis
-                        .filter(e => e.type !== 'frequent')
-                        .flatMap(e =>
-                          e.data.flatMap(e => e).filter(emoji => emoji.shortcode.includes(search))
-                        ),
-                      2
-                    )
-                  }
-                ]
-              : emojisState.emojis
-          }
-          keyExtractor={item => item[0]?.shortcode}
-          renderSectionHeader={({ section: { title } }) => (
-            <CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
-              {title}
-            </CustomText>
-          )}
-          renderItem={listItem}
-          windowSize={4}
-          contentContainerStyle={{
-            paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
-            minHeight: 32 * 2 + StyleConstants.Spacing.M * 3
+        <TextInput
+          style={{
+            flex: 1,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.border,
+            ...StyleConstants.FontStyle.M,
+            color: colors.primaryDefault,
+            paddingVertical: StyleConstants.Spacing.S
           }}
+          onChangeText={setSearch}
+          autoCapitalize='none'
+          clearButtonMode='always'
+          keyboardAppearance={mode}
+          autoCorrect={false}
+          spellCheck={false}
         />
       </View>
-    ) : null
-  },
-  () => true
-)
+      <SectionList
+        accessible
+        ref={listRef}
+        horizontal
+        keyboardShouldPersistTaps='always'
+        sections={
+          search.length
+            ? [
+                {
+                  title: 'Search result',
+                  data: chunk(
+                    emojisState.emojis
+                      .filter(e => e.type !== 'frequent')
+                      .flatMap(e =>
+                        e.data.flatMap(e => e).filter(emoji => emoji.shortcode.includes(search))
+                      ),
+                    2
+                  )
+                }
+              ]
+            : emojisState.emojis
+        }
+        keyExtractor={item => item[0]?.shortcode}
+        renderSectionHeader={({ section: { title } }) => (
+          <CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
+            {title}
+          </CustomText>
+        )}
+        renderItem={listItem}
+        windowSize={4}
+        contentContainerStyle={{
+          paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
+          minHeight: 32 * 2 + StyleConstants.Spacing.M * 3
+        }}
+      />
+    </View>
+  ) : null
+}
 
 export default EmojisList

src/components/Emojis/helpers/EmojisContext.tsx

@@ -1,11 +1,11 @@
-import { createContext, Dispatch, RefObject, SetStateAction } from 'react'
+import { createContext, Dispatch, MutableRefObject, RefObject } from 'react'
 import { TextInput } from 'react-native'
 
 type inputProps = {
-  ref: RefObject<TextInput>
-  value: string
-  setValue: Dispatch<SetStateAction<string>>
-  selectionRange?: { start: number; end: number }
+  value: [string, (value: string) => void]
+  selection: [{ start: number; end?: number }, (selection: { start: number; end?: number }) => void]
+  isFocused: MutableRefObject<boolean>
+  ref?: RefObject<TextInput> // For controlling focus
   maxLength?: number
 }
 
@@ -15,14 +15,14 @@ export type EmojisState = {
     data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
     type?: 'frequent'
   }[]
-  targetProps: inputProps | null
   inputProps: inputProps[]
+  targetIndex: number
 }
 
 export type EmojisAction =
   | { type: 'load'; payload: NonNullable<EmojisState['emojis']> }
-  | { type: 'target'; payload: EmojisState['targetProps'] }
   | { type: 'input'; payload: EmojisState['inputProps'] }
+  | { type: 'target'; payload: EmojisState['targetIndex'] }
 
 type ContextType = {
   emojisState: EmojisState
@@ -34,10 +34,10 @@ export const emojisReducer = (state: EmojisState, action: EmojisAction) => {
   switch (action.type) {
     case 'load':
       return { ...state, emojis: action.payload }
-    case 'target':
-      return { ...state, targetProps: action.payload }
     case 'input':
       return { ...state, inputProps: action.payload }
+    case 'target':
+      return { ...state, targetIndex: action.payload }
   }
 }