Fix: Keyboard opens on android when clicked on switch to keyboard btn in emoji picker (#9464) (#9471)

(cherry picked from commit 98bf396)

Co-authored-by: Rajat Dabade <rajatdabade1997@gmail.com>

Author: mattermost-build

app/components/emoji_category_bar/index.tsx

@@ -9,6 +9,7 @@ import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {useKeyboardAnimationContext} from '@context/keyboard_animation';
 import {useTheme} from '@context/theme';
 import {selectEmojiCategoryBarSection, useEmojiCategoryBar} from '@hooks/emoji_category_bar';
+import {useFocusAfterEmojiDismiss} from '@hooks/useFocusAfterEmojiDismiss';
 import {usePreventDoubleTap} from '@hooks/utils';
 import {deleteLastGrapheme} from '@utils/grapheme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@@ -61,11 +62,14 @@ const EmojiCategoryBar = ({onSelect}: Props) => {
     const keyboardContext = useKeyboardAnimationContext();
     const {
         focusInput,
+        inputRef,
         updateValue,
         updateCursorPosition,
         cursorPositionRef,
     } = keyboardContext;
 
+    const {focus: focusWithEmojiDismiss} = useFocusAfterEmojiDismiss(inputRef, focusInput);
+
     // Only show keyboard/delete buttons if we're in input accessory view mode
     // Check if updateValue is available (not null) to determine if we're in input accessory context
     const showActionButtons = updateValue !== null;
@@ -80,8 +84,8 @@ const EmojiCategoryBar = ({onSelect}: Props) => {
     }, [onSelect]);
 
     const handleKeyboardPress = usePreventDoubleTap(useCallback(() => {
-        focusInput();
-    }, [focusInput]));
+        focusWithEmojiDismiss();
+    }, [focusWithEmojiDismiss]));
 
     const deleteCharFromCurrentCursorPosition = useCallback(() => {
         if (!updateValue || !updateCursorPosition || !cursorPositionRef) {

app/hooks/useFocusAfterEmojiDismiss.ts

@@ -45,13 +45,16 @@ export const useFocusAfterEmojiDismiss = (
 
             inputRef.current?.blur();
 
-            const handleDelayedFocus = () => {
-                focusInput();
-                setIsManuallyFocusingAfterEmojiDismiss(false);
-                focusTimeoutRef.current = null;
-            };
+            // Use requestAnimationFrame to ensure state updates have been applied
+            requestAnimationFrame(() => {
+                const handleDelayedFocus = () => {
+                    focusInput();
+                    setIsManuallyFocusingAfterEmojiDismiss(false);
+                    focusTimeoutRef.current = null;
+                };
 
-            focusTimeoutRef.current = setTimeout(handleDelayedFocus, 200);
+                focusTimeoutRef.current = setTimeout(handleDelayedFocus, 200);
+            });
 
             return () => {
                 if (focusTimeoutRef.current) {
@@ -80,6 +83,20 @@ export const useFocusAfterEmojiDismiss = (
 
             setIsEmojiSearchFocused(false);
             setShowInputAccessoryView(false);
+
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+
+            inputRef.current?.blur();
+
+            // Schedule focus after emoji picker closes
+            focusTimeoutRef.current = setTimeout(() => {
+                focusInput();
+                setIsManuallyFocusingAfterEmojiDismiss(false);
+                isDismissingEmojiPicker.current = false;
+                focusTimeoutRef.current = null;
+            }, 200);
         } else {
             focusInput();
         }
@@ -91,6 +108,7 @@ export const useFocusAfterEmojiDismiss = (
         keyboardTranslateY,
         isTransitioningFromCustomView,
         setIsEmojiSearchFocused,
+        inputRef,
         focusInput,
     ]);