diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 3a8a4e724948..d37c4348e510 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -20,6 +20,7 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo import * as EmojiUtils from '@libs/EmojiUtils'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; +import Log from '@libs/Log'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import CONST from '@src/CONST'; import type {ComposerProps} from './types'; @@ -106,11 +107,22 @@ function Composer( const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? ''); const [prevScroll, setPrevScroll] = useState(); + // Those useEffects track changes of `shouldClear` and `onClear` independently. + useEffect(() => { + Log.info('[Composer] `shouldClear` value changed', true, {shouldClear}); + }, [shouldClear]); + + useEffect(() => { + Log.info('[Composer] `onClear` value changed', true, {shouldClear}); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [onClear]); + useEffect(() => { if (!shouldClear) { return; } textInput.current?.clear(); + Log.info('[Composer] `textInput` cleared', true, {shouldClear}); onClear(); }, [shouldClear, onClear]); diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 699df4c76f8b..c608f3631138 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -38,6 +38,7 @@ import * as EmojiUtils from '@libs/EmojiUtils'; import focusComposerWithDelay from '@libs/focusComposerWithDelay'; import getPlatform from '@libs/getPlatform'; import * as KeyDownListener from '@libs/KeyboardShortcut/KeyDownPressListener'; +import Log from '@libs/Log'; import {parseHtmlToMarkdown} from '@libs/OnyxAwareParser'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; @@ -277,6 +278,7 @@ function ComposerWithSuggestions( const tag = useSharedValue(-1); const draftComment = getDraftComment(reportID) ?? ''; const [value, setValue] = useState(() => { + Log.info('[ComposerWithSuggestions] Initializing state `value` with draftComment', true, {draftComment}); if (draftComment) { emojisPresentBefore.current = EmojiUtils.extractEmojis(draftComment); } @@ -434,6 +436,7 @@ function ComposerWithSuggestions( setIsCommentEmpty(isNewCommentEmpty); } emojisPresentBefore.current = emojis; + Log.info('[ComposerWithSuggestions] Setting new comment value', true, {newValue: newCommentConverted, oldValue: value}); setValue(newCommentConverted); if (commentValue !== newComment) { const position = Math.max((selection.end ?? 0) + (newComment.length - commentRef.current.length), cursorPosition ?? 0); @@ -461,6 +464,8 @@ function ComposerWithSuggestions( debouncedBroadcastUserIsTyping(reportID); } }, + // We don't want to have `value` in dependencies since it is only used in Log.info + // eslint-disable-next-line react-hooks/exhaustive-deps [ debouncedUpdateFrequentlyUsedEmojis, findNewlyAddedChars, @@ -492,12 +497,15 @@ function ComposerWithSuggestions( setSelection({start: 0, end: 0, positionX: 0, positionY: 0}); updateComment(''); + Log.info('[ComposerWithSuggestions] `textInputShouldClear` changed to true', true, {oldTextInputShouldClear: textInputShouldClear}); setTextInputShouldClear(true); if (isComposerFullSize) { Report.setIsComposerFullSize(reportID, false); } setIsFullComposerAvailable(false); return trimmedComment; + // We don't want to have `textInputShouldClear` in dependencies since it is only used in Log.info + // eslint-disable-next-line react-hooks/exhaustive-deps }, [updateComment, setTextInputShouldClear, isComposerFullSize, setIsFullComposerAvailable, reportID, debouncedSaveReportComment]); /** @@ -742,6 +750,7 @@ function ComposerWithSuggestions( ); const onClear = useCallback(() => { + Log.info('[ComposerWithSuggestions] `onClear` called', true); setTextInputShouldClear(false); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 32ed282f9331..b2f9a137485a 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -26,6 +26,7 @@ import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import {getDraftComment} from '@libs/DraftCommentUtils'; import getModalState from '@libs/getModalState'; +import Log from '@libs/Log'; import * as ReportUtils from '@libs/ReportUtils'; import playSound, {SOUNDS} from '@libs/Sound'; import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside'; @@ -160,6 +161,7 @@ function ReportActionCompose({ const [textInputShouldClear, setTextInputShouldClear] = useState(false); const [isCommentEmpty, setIsCommentEmpty] = useState(() => { const draftComment = getDraftComment(reportID); + Log.info('[ReportActionCompose] Initializing state `isCommentEmpty` with value that depends on draftComment', true, {draftComment}); return !draftComment || !!draftComment.match(/^(\s)*$/); }); @@ -267,8 +269,11 @@ function ReportActionCompose({ playSound(SOUNDS.DONE); const newComment = composerRef?.current?.prepareCommentAndResetComposer(); Report.addAttachment(reportID, file, newComment); + Log.info('[ReportActionCompose] `textInputShouldClear` changed to false', true, {oldTextInputShouldClear: textInputShouldClear}); setTextInputShouldClear(false); }, + // We don't want to have `textInputShouldClear` in dependencies since it is only used in Log.info + // eslint-disable-next-line react-hooks/exhaustive-deps [reportID], );