From c9b0ebc3ef7549893acb7882139c1dc4914a2238 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 26 Aug 2023 03:08:32 +0530 Subject: [PATCH 1/9] don't focus when ref composer is unmounted --- .../home/report/ReportActionCompose/ReportActionCompose.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index aa4ecfd4218e..a22c4e5854da 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -403,7 +403,10 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( composerRef.current.focus(true)} + onModalHide={() => { + if (composerRef === null || composerRef.current === null) + composerRef.current.focus(true) + }} onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)} emojiPickerID={report.reportID} /> From 9a66b0c9076dacc37e2b9f6686d926570286b298 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 26 Aug 2023 03:22:55 +0530 Subject: [PATCH 2/9] don't focus when ref composer is unmounted --- .../home/report/ReportActionCompose/ReportActionCompose.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index a22c4e5854da..ad52a21df89d 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -404,7 +404,9 @@ function ReportActionCompose({ { - if (composerRef === null || composerRef.current === null) + if (composerRef === null || composerRef.current === null) { + return; + } composerRef.current.focus(true) }} onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)} From fd7fd0ffb64cd966c3805d0803e787f6da997d03 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 28 Aug 2023 11:32:16 +0530 Subject: [PATCH 3/9] lint --- .../home/report/ReportActionCompose/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index ad52a21df89d..523f98264f34 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -407,7 +407,7 @@ function ReportActionCompose({ if (composerRef === null || composerRef.current === null) { return; } - composerRef.current.focus(true) + composerRef.current.focus(true); }} onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)} emojiPickerID={report.reportID} From 8433620609eba73f8174fdf58bbb361cd7bf69e2 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 28 Aug 2023 18:43:24 +0530 Subject: [PATCH 4/9] use optional chaining --- .../ReportActionCompose.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 523f98264f34..9121cc4efeaa 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -183,7 +183,7 @@ function ReportActionCompose({ if (!isKeyboardVisibleWhenShowingModalRef.current) { return; } - composerRef.current.focus(true); + composerRef?.current?.focus(true); isKeyboardVisibleWhenShowingModalRef.current = false; }, []); @@ -197,9 +197,9 @@ function ReportActionCompose({ const onAddActionPressed = useCallback(() => { if (!willBlurTextInputOnTapOutside) { - isKeyboardVisibleWhenShowingModalRef.current = composerRef.current.isFocused(); + isKeyboardVisibleWhenShowingModalRef.current = composerRef?.current?.isFocused(); } - composerRef.current.blur(); + composerRef?.current?.blur(); }, []); const updateShouldShowSuggestionMenuToFalse = useCallback(() => { @@ -218,7 +218,7 @@ function ReportActionCompose({ // We don't really care about saving the draft the user was typing // We need to make sure an empty draft gets saved instead debouncedSaveReportComment.cancel(); - const newComment = composerRef.current.prepareCommentAndResetComposer(); + const newComment = composerRef?.current?.prepareCommentAndResetComposer(); Report.addAttachment(reportID, file, newComment); setTextInputShouldClear(false); }, @@ -250,7 +250,7 @@ function ReportActionCompose({ // We need to make sure an empty draft gets saved instead debouncedSaveReportComment.cancel(); - const newComment = composerRef.current.prepareCommentAndResetComposer(); + const newComment = composerRef?.current?.prepareCommentAndResetComposer(); if (!newComment) { return; } @@ -403,13 +403,8 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( { - if (composerRef === null || composerRef.current === null) { - return; - } - composerRef.current.focus(true); - }} - onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)} + onModalHide={() => composerRef?.current?.focus(true)} + onEmojiSelected={(...args) => composerRef?.current?.replaceSelectionWithText(...args)} emojiPickerID={report.reportID} /> )} From 345485dbf3c7911faf2388891045b8712f0592a3 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 28 Aug 2023 18:47:55 +0530 Subject: [PATCH 5/9] Revert "use optional chaining" This reverts commit 8433620609eba73f8174fdf58bbb361cd7bf69e2. --- .../ReportActionCompose.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 9121cc4efeaa..523f98264f34 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -183,7 +183,7 @@ function ReportActionCompose({ if (!isKeyboardVisibleWhenShowingModalRef.current) { return; } - composerRef?.current?.focus(true); + composerRef.current.focus(true); isKeyboardVisibleWhenShowingModalRef.current = false; }, []); @@ -197,9 +197,9 @@ function ReportActionCompose({ const onAddActionPressed = useCallback(() => { if (!willBlurTextInputOnTapOutside) { - isKeyboardVisibleWhenShowingModalRef.current = composerRef?.current?.isFocused(); + isKeyboardVisibleWhenShowingModalRef.current = composerRef.current.isFocused(); } - composerRef?.current?.blur(); + composerRef.current.blur(); }, []); const updateShouldShowSuggestionMenuToFalse = useCallback(() => { @@ -218,7 +218,7 @@ function ReportActionCompose({ // We don't really care about saving the draft the user was typing // We need to make sure an empty draft gets saved instead debouncedSaveReportComment.cancel(); - const newComment = composerRef?.current?.prepareCommentAndResetComposer(); + const newComment = composerRef.current.prepareCommentAndResetComposer(); Report.addAttachment(reportID, file, newComment); setTextInputShouldClear(false); }, @@ -250,7 +250,7 @@ function ReportActionCompose({ // We need to make sure an empty draft gets saved instead debouncedSaveReportComment.cancel(); - const newComment = composerRef?.current?.prepareCommentAndResetComposer(); + const newComment = composerRef.current.prepareCommentAndResetComposer(); if (!newComment) { return; } @@ -403,8 +403,13 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( composerRef?.current?.focus(true)} - onEmojiSelected={(...args) => composerRef?.current?.replaceSelectionWithText(...args)} + onModalHide={() => { + if (composerRef === null || composerRef.current === null) { + return; + } + composerRef.current.focus(true); + }} + onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)} emojiPickerID={report.reportID} /> )} From d41c300348494b4e6589e4f3305aa7eb5ffe2b79 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 28 Aug 2023 18:49:36 +0530 Subject: [PATCH 6/9] use focus() --- .../ReportActionCompose/ReportActionCompose.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 523f98264f34..9f5484ac8e07 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -183,7 +183,7 @@ function ReportActionCompose({ if (!isKeyboardVisibleWhenShowingModalRef.current) { return; } - composerRef.current.focus(true); + focus(); isKeyboardVisibleWhenShowingModalRef.current = false; }, []); @@ -270,6 +270,12 @@ function ReportActionCompose({ isNextModalWillOpenRef.current = true; }, []); + const focus = () => { + if (composerRef === null || composerRef.current === null) { + return; + } + composerRef.current.focus(true); + } const onBlur = useCallback((e) => { setIsFocused(false); suggestionsRef.current.resetSuggestions(); @@ -403,12 +409,7 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( { - if (composerRef === null || composerRef.current === null) { - return; - } - composerRef.current.focus(true); - }} + onModalHide={focus} onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)} emojiPickerID={report.reportID} /> From 5fea3baeadf9305bb1c47d6080d8c962ce1e5107 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 28 Aug 2023 18:50:20 +0530 Subject: [PATCH 7/9] fix lint --- src/pages/home/report/ReportActionCompose/ReportActionCompose.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 9f5484ac8e07..03ce8f8cfc64 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -276,6 +276,7 @@ function ReportActionCompose({ } composerRef.current.focus(true); } + const onBlur = useCallback((e) => { setIsFocused(false); suggestionsRef.current.resetSuggestions(); From 165d6357f25ff8a3fee7897f06c3117456ce0964 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 28 Aug 2023 18:50:47 +0530 Subject: [PATCH 8/9] prettier --- .../home/report/ReportActionCompose/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 03ce8f8cfc64..35231a7c2a3b 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -275,7 +275,7 @@ function ReportActionCompose({ return; } composerRef.current.focus(true); - } + }; const onBlur = useCallback((e) => { setIsFocused(false); From ca245d10c09b84bfc8ea79184f4b6756935c96da Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 28 Aug 2023 19:06:53 +0530 Subject: [PATCH 9/9] define func before it's used --- .../ReportActionCompose/ReportActionCompose.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 35231a7c2a3b..791d7db97070 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -178,6 +178,13 @@ function ReportActionCompose({ return translate('reportActionCompose.writeSomething'); }, [report, blockedFromConcierge, translate, conciergePlaceholderRandomIndex]); + const focus = () => { + if (composerRef === null || composerRef.current === null) { + return; + } + composerRef.current.focus(true); + }; + const isKeyboardVisibleWhenShowingModalRef = useRef(false); const restoreKeyboardState = useCallback(() => { if (!isKeyboardVisibleWhenShowingModalRef.current) { @@ -270,13 +277,6 @@ function ReportActionCompose({ isNextModalWillOpenRef.current = true; }, []); - const focus = () => { - if (composerRef === null || composerRef.current === null) { - return; - } - composerRef.current.focus(true); - }; - const onBlur = useCallback((e) => { setIsFocused(false); suggestionsRef.current.resetSuggestions();