fix cursor issue

DylanDylann · Apr 8, 2024 · dd6327f · dd6327f
1 parent 27a2dd5
commit dd6327f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.tsx b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.tsx
@@ -55,4 +55,8 @@ function EmojiPickerMenuItem({
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
 // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action.
-export default React.memo(EmojiPickerMenuItem);
+export default React.memo(
+    EmojiPickerMenuItem,
+    (prevProps, nextProps) =>
+        prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement,
+);
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx b/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx
@@ -1,4 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {Text as RNText, View} from 'react-native';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -19,13 +21,17 @@ function EmojiPickerMenuItem({
     isHighlighted = false,
 }: EmojiPickerMenuItemProps) {
     const [isHovered, setIsHovered] = useState(false);
-    const ref = useRef<HTMLDivElement | null>(null);
+    const ref = useRef<HTMLDivElement | View | RNText | null>(null);
     const StyleUtils = useStyleUtils();
     const themeStyles = useThemeStyles();
 
     const focusAndScroll = () => {
-        ref?.current?.focus({preventScroll: true});
-        ref?.current?.scrollIntoView({block: 'nearest'});
+        if (ref.current && 'focus' in ref.current) {
+            ref.current.focus({preventScroll: true});
+        }
+        if (ref.current && 'scrollIntoView' in ref.current) {
+            ref.current.scrollIntoView({block: 'nearest'});
+        }
     };
 
     useEffect(() => {
@@ -58,7 +64,9 @@ function EmojiPickerMenuItem({
             }}
             onFocus={onFocus}
             onBlur={onBlur}
-            ref={ref}
+            ref={(el) => {
+                ref.current = el ?? null;
+            }}
             style={({pressed}) => [
                 isFocused ? themeStyles.emojiItemKeyboardHighlighted : {},
                 isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {},
@@ -75,4 +83,7 @@ function EmojiPickerMenuItem({
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
 // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action.
-export default React.memo(EmojiPickerMenuItem);
+export default React.memo(
+    EmojiPickerMenuItem,
+    (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji,
+);