From d28091d746cfbd1116c12de292903ba5b8b7eac3 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 7 Jan 2025 15:05:53 +0800
Subject: [PATCH 1/7] fix emoji picker won't show when edit composer is focused

---
 .../Reactions/QuickEmojiReactions/index.native.tsx    | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/Reactions/QuickEmojiReactions/index.native.tsx b/src/components/Reactions/QuickEmojiReactions/index.native.tsx
index b0eb88b31b68..90feb01b22dd 100644
--- a/src/components/Reactions/QuickEmojiReactions/index.native.tsx
+++ b/src/components/Reactions/QuickEmojiReactions/index.native.tsx
@@ -1,19 +1,10 @@
 import React from 'react';
-import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import BaseQuickEmojiReactions from './BaseQuickEmojiReactions';
 import type {OpenPickerCallback, QuickEmojiReactionsProps} from './types';
 
 function QuickEmojiReactions({closeContextMenu, ...rest}: QuickEmojiReactionsProps) {
     const onPressOpenPicker = (openPicker?: OpenPickerCallback) => {
-        // We first need to close the menu as it's a popover.
-        // The picker is a popover as well and on mobile there can only
-        // be one active popover at a time.
-        closeContextMenu(() => {
-            // As the menu which includes the button to open the emoji picker
-            // gets closed, before the picker actually opens, we pass the composer
-            // ref as anchor for the emoji picker popover.
-            openPicker?.(ReportActionComposeFocusManager.composerRef);
-        });
+        openPicker?.();
     };
 
     return (

From 48c8fc310e17851f787a10e8c598df28275e79ae Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 7 Jan 2025 15:06:09 +0800
Subject: [PATCH 2/7] only prevent showing the main composer if the emoji
 picker is from the current report action

---
 src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx
index 6dff93bd1af3..abfc331ceb5f 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.tsx
+++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx
@@ -545,7 +545,7 @@ function ReportActionItemMessageEdit(
                             onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
                                 setIsFocused(false);
                                 const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
-                                if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isEmojiPickerVisible()) {
+                                if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isActive(action.reportActionID)) {
                                     return;
                                 }
                                 setShouldShowComposeInputKeyboardAware(true);

From 8626fdfd345b8b6f18f1aed196fb07940c4e21dc Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 7 Jan 2025 15:16:19 +0800
Subject: [PATCH 3/7] prettier

---
 src/pages/home/report/ReportActionItemMessageEdit.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx
index abfc331ceb5f..ea0f4007f946 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.tsx
+++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx
@@ -545,7 +545,11 @@ function ReportActionItemMessageEdit(
                             onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
                                 setIsFocused(false);
                                 const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
-                                if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isActive(action.reportActionID)) {
+                                if (
+                                    relatedTargetId === CONST.COMPOSER.NATIVE_ID ||
+                                    relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID ||
+                                    EmojiPickerAction.isActive(action.reportActionID)
+                                ) {
                                     return;
                                 }
                                 setShouldShowComposeInputKeyboardAware(true);

From d33dbc78cf4da40c04f7460ef856feb74c264a7a Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 17 Jan 2025 09:59:38 +0800
Subject: [PATCH 4/7] use the prev behavior

---
 src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx
index ea0f4007f946..fd4f8d514b08 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.tsx
+++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx
@@ -548,7 +548,7 @@ function ReportActionItemMessageEdit(
                                 if (
                                     relatedTargetId === CONST.COMPOSER.NATIVE_ID ||
                                     relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID ||
-                                    EmojiPickerAction.isActive(action.reportActionID)
+                                    EmojiPickerAction.isEmojiPickerVisible()
                                 ) {
                                     return;
                                 }

From f680b093a0a13186340998c544cbeab7e1e6faa3 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 17 Jan 2025 10:03:00 +0800
Subject: [PATCH 5/7] lint

---
 .../report/ReportActionItemMessageEdit.tsx    | 60 +++++++++----------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx
index fd4f8d514b08..6c0001b8c803 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.tsx
+++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx
@@ -25,9 +25,13 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ComposerUtils from '@libs/ComposerUtils';
+import {setShouldShowComposeInput} from '@libs/actions/Composer';
+import {clearActive, isActive as isEmojiPickerActive, isEmojiPickerVisible} from '@libs/actions/EmojiPickerAction';
+import {callback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus';
+import {deleteReportActionDraft, editReportComment, saveReportActionDraft} from '@libs/actions/Report';
+import {canSkipTriggerHotkeys, insertText} from '@libs/ComposerUtils';
 import DomUtils from '@libs/DomUtils';
-import * as EmojiUtils from '@libs/EmojiUtils';
+import {extractEmojis, replaceAndExtractEmojis} from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import type {Selection} from '@libs/focusComposerWithDelay/types';
 import focusEditAfterCancelDelete from '@libs/focusEditAfterCancelDelete';
@@ -35,13 +39,9 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import Parser from '@libs/Parser';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import reportActionItemEventHandler from '@libs/ReportActionItemEventHandler';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import * as ReportUtils from '@libs/ReportUtils';
+import {getReportActionHtml, isDeletedAction} from '@libs/ReportActionsUtils';
+import {getCommentLength} from '@libs/ReportUtils';
 import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware';
-import * as ComposerActions from '@userActions/Composer';
-import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
-import * as InputFocus from '@userActions/InputFocus';
-import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -102,7 +102,7 @@ function ReportActionItemMessageEdit(
     const emojisPresentBefore = useRef<Emoji[]>([]);
     const [draft, setDraft] = useState(() => {
         if (draftMessage) {
-            emojisPresentBefore.current = EmojiUtils.extractEmojis(draftMessage);
+            emojisPresentBefore.current = extractEmojis(draftMessage);
         }
         return draftMessage;
     });
@@ -126,17 +126,17 @@ function ReportActionItemMessageEdit(
     useEffect(() => {
         draftMessageVideoAttributeCache.clear();
 
-        const originalMessage = Parser.htmlToMarkdown(ReportActionsUtils.getReportActionHtml(action), {
+        const originalMessage = Parser.htmlToMarkdown(getReportActionHtml(action), {
             cacheVideoAttributes: (videoSource, attrs) => draftMessageVideoAttributeCache.set(videoSource, attrs),
         });
-        if (ReportActionsUtils.isDeletedAction(action) || !!(action.message && draftMessage === originalMessage) || !!(prevDraftMessage === draftMessage || isCommentPendingSaved.current)) {
+        if (isDeletedAction(action) || !!(action.message && draftMessage === originalMessage) || !!(prevDraftMessage === draftMessage || isCommentPendingSaved.current)) {
             return;
         }
         setDraft(draftMessage);
     }, [draftMessage, action, prevDraftMessage]);
 
     useEffect(() => {
-        InputFocus.composerFocusKeepFocusOn(textInputRef.current as HTMLElement, isFocused, modal, onyxFocused);
+        composerFocusKeepFocusOn(textInputRef.current as HTMLElement, isFocused, modal, onyxFocused);
     }, [isFocused, modal, onyxFocused]);
 
     useEffect(() => {
@@ -183,7 +183,7 @@ function ReportActionItemMessageEdit(
 
     // We consider the report action active if it's focused, its emoji picker is open or its context menu is open
     const isActive = useCallback(
-        () => isFocusedRef.current || EmojiPickerAction.isActive(action.reportActionID) || ReportActionContextMenu.isActiveReportAction(action.reportActionID),
+        () => isFocusedRef.current || isEmojiPickerActive(action.reportActionID) || ReportActionContextMenu.isActiveReportAction(action.reportActionID),
         [action.reportActionID],
     );
 
@@ -210,16 +210,16 @@ function ReportActionItemMessageEdit(
             }
 
             return () => {
-                InputFocus.callback(() => setIsFocused(false));
-                InputFocus.inputFocusChange(false);
+                callback(() => setIsFocused(false));
+                inputFocusChange(false);
 
                 // Skip if the current report action is not active
                 if (!isActive()) {
                     return;
                 }
 
-                if (EmojiPickerAction.isActive(action.reportActionID)) {
-                    EmojiPickerAction.clearActive();
+                if (isEmojiPickerActive(action.reportActionID)) {
+                    clearActive();
                 }
                 if (ReportActionContextMenu.isActiveReportAction(action.reportActionID)) {
                     ReportActionContextMenu.clearActiveReportAction();
@@ -235,7 +235,7 @@ function ReportActionItemMessageEdit(
     );
 
     // show the composer after editing is complete for devices that hide the composer during editing.
-    useEffect(() => () => ComposerActions.setShouldShowComposeInput(true), []);
+    useEffect(() => () => setShouldShowComposeInput(true), []);
 
     /**
      * Save the draft of the comment. This debounced so that we're not ceaselessly saving your edit. Saving the draft
@@ -246,7 +246,7 @@ function ReportActionItemMessageEdit(
         () =>
             // eslint-disable-next-line react-compiler/react-compiler
             lodashDebounce((newDraft: string) => {
-                Report.saveReportActionDraft(reportID, action, newDraft);
+                saveReportActionDraft(reportID, action, newDraft);
                 isCommentPendingSaved.current = false;
             }, 1000),
         [reportID, action],
@@ -267,7 +267,7 @@ function ReportActionItemMessageEdit(
      */
     const updateDraft = useCallback(
         (newDraftInput: string) => {
-            const {text: newDraft, emojis, cursorPosition} = EmojiUtils.replaceAndExtractEmojis(newDraftInput, preferredSkinTone, preferredLocale);
+            const {text: newDraft, emojis, cursorPosition} = replaceAndExtractEmojis(newDraftInput, preferredSkinTone, preferredLocale);
 
             emojisPresentBefore.current = emojis;
 
@@ -301,7 +301,7 @@ function ReportActionItemMessageEdit(
      * Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content.
      */
     const deleteDraft = useCallback(() => {
-        Report.deleteReportActionDraft(reportID, action);
+        deleteReportActionDraft(reportID, action);
 
         if (isActive()) {
             ReportActionComposeFocusManager.clear(true);
@@ -324,7 +324,7 @@ function ReportActionItemMessageEdit(
      */
     const publishDraft = useCallback(() => {
         // Do nothing if draft exceed the character limit
-        if (ReportUtils.getCommentLength(draft, {reportID}) > CONST.MAX_COMMENT_LENGTH) {
+        if (getCommentLength(draft, {reportID}) > CONST.MAX_COMMENT_LENGTH) {
             return;
         }
 
@@ -336,7 +336,7 @@ function ReportActionItemMessageEdit(
             ReportActionContextMenu.showDeleteModal(reportID, action, true, deleteDraft, () => focusEditAfterCancelDelete(textInputRef.current));
             return;
         }
-        Report.editReportComment(reportID, action, trimmedNewDraft, Object.fromEntries(draftMessageVideoAttributeCache));
+        editReportComment(reportID, action, trimmedNewDraft, Object.fromEntries(draftMessageVideoAttributeCache));
         deleteDraft();
     }, [action, deleteDraft, draft, reportID]);
 
@@ -357,7 +357,7 @@ function ReportActionItemMessageEdit(
             // To fix this, immediately set the selection again after focusing the input.
             emojiPickerSelectionRef.current = newSelection;
         }
-        updateDraft(ComposerUtils.insertText(draft, selection, `${emoji} `));
+        updateDraft(insertText(draft, selection, `${emoji} `));
     };
 
     const hideSuggestionMenu = useCallback(() => {
@@ -382,7 +382,7 @@ function ReportActionItemMessageEdit(
      */
     const triggerSaveOrCancel = useCallback(
         (e: NativeSyntheticEvent<TextInputKeyPressEventData> | KeyboardEvent) => {
-            if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
+            if (!e || canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
                 return;
             }
             const keyEvent = e as KeyboardEvent;
@@ -535,8 +535,8 @@ function ReportActionItemMessageEdit(
                                 setUpComposeFocusManager();
 
                                 // Clear active report action when another action gets focused
-                                if (!EmojiPickerAction.isActive(action.reportActionID)) {
-                                    EmojiPickerAction.clearActive();
+                                if (!isEmojiPickerActive(action.reportActionID)) {
+                                    clearActive();
                                 }
                                 if (!ReportActionContextMenu.isActiveReportAction(action.reportActionID)) {
                                     ReportActionContextMenu.clearActiveReportAction();
@@ -545,11 +545,7 @@ function ReportActionItemMessageEdit(
                             onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
                                 setIsFocused(false);
                                 const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
-                                if (
-                                    relatedTargetId === CONST.COMPOSER.NATIVE_ID ||
-                                    relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID ||
-                                    EmojiPickerAction.isEmojiPickerVisible()
-                                ) {
+                                if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || isEmojiPickerVisible()) {
                                     return;
                                 }
                                 setShouldShowComposeInputKeyboardAware(true);

From 1ce7742b7fbcd955c0c26460f6785f5a59e86170 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 17 Jan 2025 10:09:39 +0800
Subject: [PATCH 6/7] lint

---
 src/pages/home/report/ReportActionItemMessageEdit.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx
index 6c0001b8c803..b69a26c17ae2 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.tsx
+++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx
@@ -27,7 +27,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {setShouldShowComposeInput} from '@libs/actions/Composer';
 import {clearActive, isActive as isEmojiPickerActive, isEmojiPickerVisible} from '@libs/actions/EmojiPickerAction';
-import {callback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus';
+import {callback as inputFocusCallback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus';
 import {deleteReportActionDraft, editReportComment, saveReportActionDraft} from '@libs/actions/Report';
 import {canSkipTriggerHotkeys, insertText} from '@libs/ComposerUtils';
 import DomUtils from '@libs/DomUtils';
@@ -210,7 +210,7 @@ function ReportActionItemMessageEdit(
             }
 
             return () => {
-                callback(() => setIsFocused(false));
+                inputFocusCallback(() => setIsFocused(false));
                 inputFocusChange(false);
 
                 // Skip if the current report action is not active

From 542d1f4f9fd40ab9897c6e6a0f07d1f02efc42cf Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 17 Jan 2025 10:15:21 +0800
Subject: [PATCH 7/7] prettier

---
 src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx
index b69a26c17ae2..1862e2b96596 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.tsx
+++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx
@@ -27,7 +27,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {setShouldShowComposeInput} from '@libs/actions/Composer';
 import {clearActive, isActive as isEmojiPickerActive, isEmojiPickerVisible} from '@libs/actions/EmojiPickerAction';
-import {callback as inputFocusCallback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus';
+import {composerFocusKeepFocusOn, callback as inputFocusCallback, inputFocusChange} from '@libs/actions/InputFocus';
 import {deleteReportActionDraft, editReportComment, saveReportActionDraft} from '@libs/actions/Report';
 import {canSkipTriggerHotkeys, insertText} from '@libs/ComposerUtils';
 import DomUtils from '@libs/DomUtils';