Emoji picker onModalHide: return early if the active element is another emoji picker button

src/CONST.ts

@@ -1042,6 +1042,7 @@ const CONST = {
         },
     },
     COMPOSER: {
+        NATIVE_ID: 'composer',
         MAX_LINES: 16,
         MAX_LINES_SMALL_SCREEN: 6,
         MAX_LINES_FULL: -1,
@@ -4274,6 +4275,7 @@ const CONST = {
     },
 
     BACK_BUTTON_NATIVE_ID: 'backButton',
+    EMOJI_PICKER_BUTTON_NATIVE_ID: 'emojiPickerButton',
 
     /**
      * The maximum count of items per page for SelectionList.

src/components/Composer/index.native.tsx

@@ -16,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
+import CONST from '@src/CONST';
 import type {ComposerProps} from './types';
 
 const excludeNoStyles: Array<keyof MarkdownStyle> = [];
@@ -111,6 +112,7 @@ function Composer(
 
     return (
         <RNMarkdownTextInput
+            id={CONST.COMPOSER.NATIVE_ID}
             multiline
             autoComplete="off"
             placeholderTextColor={theme.placeholderText}

src/components/Composer/index.tsx

@@ -378,6 +378,7 @@ function Composer(
     return (
         <>
             <RNMarkdownTextInput
+                id={CONST.COMPOSER.NATIVE_ID}
                 autoComplete="off"
                 autoCorrect={!Browser.isMobileSafari()}
                 placeholderTextColor={theme.placeholderText}

src/components/Composer/types.ts

@@ -13,9 +13,6 @@ type CustomSelectionChangeEvent = NativeSyntheticEvent<TextInputSelectionChangeE
 };
 
 type ComposerProps = Omit<TextInputProps, 'onClear'> & {
-    /** identify id in the text input */
-    id?: string;
-
     /** Indicate whether input is multiline */
     multiline?: boolean;
 

src/components/EmojiPicker/EmojiPickerButton.tsx

@@ -16,9 +16,6 @@ type EmojiPickerButtonProps = {
     /** Flag to disable the emoji picker button */
     isDisabled?: boolean;
 
-    /** Id to use for the emoji picker button */
-    id?: string;
-
     /** Unique id for emoji picker */
     emojiPickerID?: string;
 
@@ -33,7 +30,7 @@ type EmojiPickerButtonProps = {
     onEmojiSelected: EmojiPickerAction.OnEmojiSelected;
 };
 
-function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shiftVertical = 0, onPress, onModalHide, onEmojiSelected}: EmojiPickerButtonProps) {
+function EmojiPickerButton({isDisabled = false, emojiPickerID = '', shiftVertical = 0, onPress, onModalHide, onEmojiSelected}: EmojiPickerButtonProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const emojiPopoverAnchor = useRef(null);
@@ -70,7 +67,7 @@ function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shi
                     }
                     onPress?.(e);
                 }}
-                id={id}
+                id={CONST.EMOJI_PICKER_BUTTON_NATIVE_ID}
                 accessibilityLabel={translate('reportActionCompose.emoji')}
             >
                 {({hovered, pressed}) => (

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -30,6 +30,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import DomUtils from '@libs/DomUtils';
 import {getDraftComment} from '@libs/DraftCommentUtils';
 import getModalState from '@libs/getModalState';
 import Performance from '@libs/Performance';
@@ -515,6 +516,10 @@ function ReportActionCompose({
                                         if (isNavigating) {
                                             return;
                                         }
+                                        const activeElementId = DomUtils.getActiveElement()?.id;
+                                        if (activeElementId === CONST.COMPOSER.NATIVE_ID || activeElementId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID) {
+                                            return;
+                                        }
                                         focus();
                                     }}
                                     onEmojiSelected={(...args) => composerRef.current?.replaceSelectionWithText(...args)}

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -26,6 +26,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
+import DomUtils from '@libs/DomUtils';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import type {Selection} from '@libs/focusComposerWithDelay/types';
@@ -74,10 +75,6 @@ type ReportActionItemMessageEditProps = {
     isGroupPolicyReport: boolean;
 };
 
-// native ids
-const emojiButtonID = 'emojiButton';
-const messageEditInput = 'messageEditInput';
-
 const shouldUseForcedSelectionRange = shouldUseEmojiPickerSelection();
 
 // video source -> video attributes
@@ -508,7 +505,6 @@ function ReportActionItemMessageEdit(
                                     forwardedRef.current = el;
                                 }
                             }}
-                            id={messageEditInput}
                             onChangeText={updateDraft} // Debounced saveDraftComment
                             onKeyPress={triggerSaveOrCancel}
                             value={draft}
@@ -536,8 +532,7 @@ function ReportActionItemMessageEdit(
                             onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
                                 setIsFocused(false);
                                 const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
-                                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                                if ((relatedTargetId && [messageEditInput, emojiButtonID].includes(relatedTargetId)) || EmojiPickerAction.isEmojiPickerVisible()) {
+                                if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isEmojiPickerVisible()) {
                                     return;
                                 }
                                 setShouldShowComposeInputKeyboardAware(true);
@@ -567,10 +562,13 @@ function ReportActionItemMessageEdit(
                         <EmojiPickerButton
                             isDisabled={shouldDisableEmojiPicker}
                             onModalHide={() => {
+                                const activeElementId = DomUtils.getActiveElement()?.id;
+                                if (activeElementId === CONST.COMPOSER.NATIVE_ID || activeElementId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID) {
+                                    return;
+                                }
                                 ReportActionComposeFocusManager.focus();
                             }}
                             onEmojiSelected={addEmojiToTextBox}
-                            id={emojiButtonID}
                             emojiPickerID={action.reportActionID}
                             onPress={setUpComposeFocusManager}
                         />