Fix focus after picking an emoji in edit mode

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -270,6 +270,28 @@ function ReportActionItemMessageEdit(props) {
         [deleteDraft, isKeyboardShown, isSmallScreenWidth, publishDraft],
     );
 
+    /**
+     * Focus the composer text input
+     */
+    const focus = React.useCallback(() => {
+        // There could be other animations running while we trigger manual focus.
+        // This prevents focus from making those animations janky.
+        InteractionManager.runAfterInteractions(() => {
+            if (!textInputRef.current) {
+                return;
+            }
+
+            // Keyboard is not opened after Emoji Picker is closed
+            // SetTimeout is used as a workaround
+            // https://github.com/react-native-modal/react-native-modal/issues/114
+            // We carefully choose a delay. 100ms is found enough for keyboard to open.
+            setTimeout(() => {
+                setIsFocused(true);
+                textInputRef.current.focus();
+            }, 100);
+        });
+    }, []);
+
     return (
         <>
             <View style={[styles.chatItemMessage, styles.flexRow]}>
@@ -345,7 +367,7 @@ function ReportActionItemMessageEdit(props) {
                     <View style={styles.editChatItemEmojiWrapper}>
                         <EmojiPickerButton
                             isDisabled={props.shouldDisableEmojiPicker}
-                            onModalHide={() => InteractionManager.runAfterInteractions(() => textInputRef.current.focus())}
+                            onModalHide={focus}
                             onEmojiSelected={addEmojiToTextBox}
                             nativeID={emojiButtonID}
                             reportAction={props.action}