Merge pull request #41298 from bernhardoj/fix/40461-main-composer-show-when-opening-emoji-picker

Fix main composer shows briefly when opening emoji picker

Author: puneetlath

src/components/HeaderWithBackButton/index.tsx

@@ -160,7 +160,7 @@ function HeaderWithBackButton({
                             style={[styles.touchableButtonImage]}
                             role="button"
                             accessibilityLabel={translate('common.back')}
-                            nativeID={CONST.BACK_BUTTON_NATIVE_ID}
+                            id={CONST.BACK_BUTTON_NATIVE_ID}
                         >
                             <Icon
                                 src={Expensicons.BackArrow}

src/components/OptionRow.tsx

@@ -163,7 +163,7 @@ function OptionRow({
                     needsOffscreenAlphaCompositing
                 >
                     <PressableWithFeedback
-                        nativeID={keyForList}
+                        id={keyForList}
                         ref={pressableRef}
                         onPress={(e) => {
                             if (!onSelectRow) {

src/components/Pressable/GenericPressable/index.tsx

@@ -16,14 +16,13 @@ function WebGenericPressable({focusable = true, ...props}: PressableProps, ref:
             focusable={focusable}
             tabIndex={props.tabIndex ?? (!accessible || !focusable) ? -1 : 0}
             role={(props.accessibilityRole ?? props.role) as Role}
-            id={props.nativeID}
+            id={props.id}
             aria-label={props.accessibilityLabel}
             aria-labelledby={props.accessibilityLabelledBy}
             aria-valuenow={props.accessibilityValue?.now}
             aria-valuemin={props.accessibilityValue?.min}
             aria-valuemax={props.accessibilityValue?.max}
             aria-valuetext={props.accessibilityValue?.text}
-            nativeID={props.nativeID}
             dataSet={{tag: 'pressable', ...(props.noDragArea && {dragArea: false}), ...props.dataSet}}
         />
     );

src/components/SelectionList/BaseListItem.tsx

@@ -79,7 +79,7 @@ function BaseListItem<TItem extends ListItem>({
                 hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, hoverStyle]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
-                nativeID={keyForList ?? ''}
+                id={keyForList ?? ''}
                 style={pressableStyle}
                 onFocus={onFocus}
             >

src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx

@@ -34,7 +34,7 @@ function BaseOverlay({shouldUseNativeStyles, onPress, isModalOnTheLeft = false}:
                     onPress={onPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ROLE.BUTTON}
-                    nativeID={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
+                    id={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
                     tabIndex={-1}
                 />
                 <PressableWithoutFeedback
@@ -43,7 +43,7 @@ function BaseOverlay({shouldUseNativeStyles, onPress, isModalOnTheLeft = false}:
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ROLE.BUTTON}
                     noDragArea
-                    nativeID={CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID}
+                    id={CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID}
                     tabIndex={-1}
                 />
             </View>

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -450,7 +450,7 @@ function ReportActionItemMessageEdit(
                                 setIsFocused(false);
                                 // @ts-expect-error TODO: TextInputFocusEventData doesn't contain relatedTarget.
                                 const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
-                                if (relatedTargetId && [messageEditInput, emojiButtonID].includes(relatedTargetId)) {
+                                if ((relatedTargetId && [messageEditInput, emojiButtonID].includes(relatedTargetId)) || EmojiPickerAction.isEmojiPickerVisible()) {
                                     return;
                                 }
                                 setShouldShowComposeInputKeyboardAware(true);