From 63d549972d0c182d3e310f1ef25bcde0c21c6021 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Sat, 22 Jul 2023 12:48:04 -0500 Subject: [PATCH 1/9] fix: update logic to show main composer --- .../index.js | 4 ++-- .../index.native.js | 15 +++++++++++++-- .../home/report/ReportActionItemMessageEdit.js | 11 ++++------- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.js b/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.js index 4f3e8c5de2c8..a8ad5f54a65f 100644 --- a/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.js +++ b/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.js @@ -1,5 +1,5 @@ import * as Composer from '../actions/Composer'; -export default () => { - Composer.setShouldShowComposeInput(true); +export default (shouldShow) => { + Composer.setShouldShowComposeInput(shouldShow); }; diff --git a/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.native.js b/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.native.js index 488769741715..594b0e5d1a3e 100644 --- a/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.native.js +++ b/src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.native.js @@ -1,8 +1,19 @@ import {Keyboard} from 'react-native'; import * as Composer from '../actions/Composer'; -export default () => { - const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => { +let keyboardDidHideListener = null; +export default (shouldShow) => { + if (keyboardDidHideListener) { + keyboardDidHideListener.remove(); + keyboardDidHideListener = null; + } + + if (!shouldShow || !Keyboard.isVisible()) { + Composer.setShouldShowComposeInput(shouldShow); + return; + } + + keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => { Composer.setShouldShowComposeInput(true); keyboardDidHideListener.remove(); }); diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index d45f0442f3f7..f04456b0bd4c 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -286,6 +286,7 @@ function ReportActionItemMessageEdit(props) { pressDimmingValue={1} hoverStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.ACTIVE)} pressStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)} + onMouseDown={(e) => e.preventDefault()} > {({hovered, pressed}) => ( { setIsFocused(true); reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); - ComposerActions.setShouldShowComposeInput(false); + openReportActionComposeViewWhenClosingMessageEdit(false); }} onBlur={(event) => { setIsFocused(false); const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id'); - // Return to prevent re-render when save/cancel button is pressed which cancels the onPress event by re-rendering - if (_.contains([saveButtonID, cancelButtonID, emojiButtonID], relatedTargetId)) { - return; - } - if (messageEditInput === relatedTargetId) { return; } - openReportActionComposeViewWhenClosingMessageEdit(); + openReportActionComposeViewWhenClosingMessageEdit(true); }} selection={!isFocused ? undefined : selection} onSelectionChange={(e) => setSelection(e.nativeEvent.selection)} @@ -363,6 +359,7 @@ function ReportActionItemMessageEdit(props) { accessibilityLabel={translate('common.saveChanges')} hoverDimmingValue={1} pressDimmingValue={0.2} + onMouseDown={(e) => e.preventDefault()} > Date: Sat, 22 Jul 2023 12:52:07 -0500 Subject: [PATCH 2/9] fix: remove empty line --- src/pages/home/report/ReportActionItemMessageEdit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index f04456b0bd4c..c063eb12aa13 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -328,7 +328,6 @@ function ReportActionItemMessageEdit(props) { onBlur={(event) => { setIsFocused(false); const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id'); - if (messageEditInput === relatedTargetId) { return; } From 38472127d5c985923f89b64d41dc9ff56ad8fcb4 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Wed, 26 Jul 2023 00:40:27 -0500 Subject: [PATCH 3/9] fix: show main composer when focused --- src/pages/home/report/ReportActionItemMessageEdit.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 7584427a46d6..a9a4140adc93 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -128,7 +128,9 @@ function ReportActionItemMessageEdit(props) { // Show the main composer when the focused message is deleted from another client // to prevent the main composer stays hidden until we swtich to another chat. - ComposerActions.setShouldShowComposeInput(true); + if (isFocusedRef.current) { + ComposerActions.setShouldShowComposeInput(true); + } }; }, [props.action.reportActionID]); @@ -202,8 +204,10 @@ function ReportActionItemMessageEdit(props) { const deleteDraft = useCallback(() => { debouncedSaveDraft.cancel(); Report.saveReportActionDraft(props.reportID, props.action.reportActionID, ''); - ComposerActions.setShouldShowComposeInput(true); - ReportActionComposeFocusManager.focus(); + if (isFocusedRef.current) { + ComposerActions.setShouldShowComposeInput(true); + ReportActionComposeFocusManager.focus(); + } // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report. if (props.index === 0) { @@ -288,6 +292,7 @@ function ReportActionItemMessageEdit(props) { hoverStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.ACTIVE)} pressStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)} onMouseDown={(e) => e.preventDefault()} + onMouseUp={(e) => e.preventDefault()} > {({hovered, pressed}) => ( Date: Wed, 26 Jul 2023 07:16:15 -0500 Subject: [PATCH 4/9] fix: refine code and remove possible regression --- .../EmojiPicker/EmojiPickerButton.js | 5 +++++ .../index.js | 0 .../index.native.js | 8 ++++++- .../report/ReportActionItemMessageEdit.js | 21 +++++++------------ 4 files changed, 20 insertions(+), 14 deletions(-) rename src/libs/{openReportActionComposeViewWhenClosingMessageEdit => setShouldShowMainComposeInputKeyboardAware}/index.js (100%) rename src/libs/{openReportActionComposeViewWhenClosingMessageEdit => setShouldShowMainComposeInputKeyboardAware}/index.native.js (68%) diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index 32a794911fd9..38034fbadecd 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -17,6 +17,9 @@ const propTypes = { /** Id to use for the emoji picker button */ nativeID: PropTypes.string, + /** Mouse event handler */ + onMouseDown: PropTypes.func, + /** * ReportAction for EmojiPicker. */ @@ -31,6 +34,7 @@ const defaultProps = { isDisabled: false, nativeID: '', reportAction: {}, + onMouseDown: undefined, }; function EmojiPickerButton(props) { @@ -45,6 +49,7 @@ function EmojiPickerButton(props) { onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, () => {}, props.reportAction)} nativeID={props.nativeID} accessibilityLabel={props.translate('reportActionCompose.emoji')} + onMouseDown={props.onMouseDown} > {({hovered, pressed}) => ( { keyboardDidHideListener = null; } - if (!shouldShow || !Keyboard.isVisible()) { + if (!shouldShow) { Composer.setShouldShowComposeInput(shouldShow); return; } + // If keyboard is already hidden, we should show composer immediately because keyboardDidHide event won't be called + if (!Keyboard.isVisible()) { + Composer.setShouldShowComposeInput(true); + return; + } + keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => { Composer.setShouldShowComposeInput(true); keyboardDidHideListener.remove(); diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index a9a4140adc93..a807138a9269 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -12,7 +12,7 @@ import * as StyleUtils from '../../../styles/StyleUtils'; import containerComposeStyles from '../../../styles/containerComposeStyles'; import Composer from '../../../components/Composer'; import * as Report from '../../../libs/actions/Report'; -import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit'; +import setShouldShowMainComposeInputKeyboardAware from '../../../libs/setShouldShowMainComposeInputKeyboardAware'; import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; import Icon from '../../../components/Icon'; @@ -74,9 +74,6 @@ const defaultProps = { }; // native ids -const saveButtonID = 'saveButton'; -const cancelButtonID = 'cancelButton'; -const emojiButtonID = 'emojiButton'; const messageEditInput = 'messageEditInput'; function ReportActionItemMessageEdit(props) { @@ -128,9 +125,7 @@ function ReportActionItemMessageEdit(props) { // Show the main composer when the focused message is deleted from another client // to prevent the main composer stays hidden until we swtich to another chat. - if (isFocusedRef.current) { - ComposerActions.setShouldShowComposeInput(true); - } + ComposerActions.setShouldShowComposeInput(true); }; }, [props.action.reportActionID]); @@ -283,7 +278,6 @@ function ReportActionItemMessageEdit(props) { e.preventDefault()} - onMouseUp={(e) => e.preventDefault()} > {({hovered, pressed}) => ( { setIsFocused(true); reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); - openReportActionComposeViewWhenClosingMessageEdit(false); + setShouldShowMainComposeInputKeyboardAware(false); }} onBlur={(event) => { setIsFocused(false); @@ -337,7 +331,7 @@ function ReportActionItemMessageEdit(props) { if (messageEditInput === relatedTargetId) { return; } - openReportActionComposeViewWhenClosingMessageEdit(true); + setShouldShowMainComposeInputKeyboardAware(true); }} selection={selection} onSelectionChange={(e) => setSelection(e.nativeEvent.selection)} @@ -348,8 +342,9 @@ function ReportActionItemMessageEdit(props) { isDisabled={props.shouldDisableEmojiPicker} onModalHide={() => InteractionManager.runAfterInteractions(() => textInputRef.current.focus())} onEmojiSelected={addEmojiToTextBox} - nativeID={emojiButtonID} reportAction={props.action} + // Keep focus on the composer when save button is clicked. + onMouseDown={(e) => e.preventDefault()} /> @@ -358,12 +353,12 @@ function ReportActionItemMessageEdit(props) { e.preventDefault()} > Date: Wed, 26 Jul 2023 07:30:33 -0500 Subject: [PATCH 5/9] fix: remove nativeID from EmojiPickerButton --- src/components/EmojiPicker/EmojiPickerButton.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index 38034fbadecd..f22792160634 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -14,9 +14,6 @@ const propTypes = { /** Flag to disable the emoji picker button */ isDisabled: PropTypes.bool, - /** Id to use for the emoji picker button */ - nativeID: PropTypes.string, - /** Mouse event handler */ onMouseDown: PropTypes.func, @@ -32,7 +29,6 @@ const propTypes = { const defaultProps = { isDisabled: false, - nativeID: '', reportAction: {}, onMouseDown: undefined, }; @@ -47,7 +43,6 @@ function EmojiPickerButton(props) { style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]} disabled={props.isDisabled} onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, () => {}, props.reportAction)} - nativeID={props.nativeID} accessibilityLabel={props.translate('reportActionCompose.emoji')} onMouseDown={props.onMouseDown} > From 02b212836f87776be7965c9a31747e90cf084802 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Wed, 26 Jul 2023 07:59:41 -0500 Subject: [PATCH 6/9] fix: rename function,update comment --- .../index.js | 0 .../index.native.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 8 ++++---- 3 files changed, 5 insertions(+), 5 deletions(-) rename src/libs/{setShouldShowMainComposeInputKeyboardAware => setShouldShowComposeInputKeyboardAware}/index.js (100%) rename src/libs/{setShouldShowMainComposeInputKeyboardAware => setShouldShowComposeInputKeyboardAware}/index.native.js (92%) diff --git a/src/libs/setShouldShowMainComposeInputKeyboardAware/index.js b/src/libs/setShouldShowComposeInputKeyboardAware/index.js similarity index 100% rename from src/libs/setShouldShowMainComposeInputKeyboardAware/index.js rename to src/libs/setShouldShowComposeInputKeyboardAware/index.js diff --git a/src/libs/setShouldShowMainComposeInputKeyboardAware/index.native.js b/src/libs/setShouldShowComposeInputKeyboardAware/index.native.js similarity index 92% rename from src/libs/setShouldShowMainComposeInputKeyboardAware/index.native.js rename to src/libs/setShouldShowComposeInputKeyboardAware/index.native.js index c4d781a2361d..147d21d51168 100644 --- a/src/libs/setShouldShowMainComposeInputKeyboardAware/index.native.js +++ b/src/libs/setShouldShowComposeInputKeyboardAware/index.native.js @@ -9,7 +9,7 @@ export default (shouldShow) => { } if (!shouldShow) { - Composer.setShouldShowComposeInput(shouldShow); + Composer.setShouldShowComposeInput(false); return; } diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index a807138a9269..4a7e2c65b8bf 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -12,7 +12,7 @@ import * as StyleUtils from '../../../styles/StyleUtils'; import containerComposeStyles from '../../../styles/containerComposeStyles'; import Composer from '../../../components/Composer'; import * as Report from '../../../libs/actions/Report'; -import setShouldShowMainComposeInputKeyboardAware from '../../../libs/setShouldShowMainComposeInputKeyboardAware'; +import setShouldShowComposeInputKeyboardAware from '../../../libs/setShouldShowComposeInputKeyboardAware'; import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; import Icon from '../../../components/Icon'; @@ -323,7 +323,7 @@ function ReportActionItemMessageEdit(props) { onFocus={() => { setIsFocused(true); reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); - setShouldShowMainComposeInputKeyboardAware(false); + setShouldShowComposeInputKeyboardAware(false); }} onBlur={(event) => { setIsFocused(false); @@ -331,7 +331,7 @@ function ReportActionItemMessageEdit(props) { if (messageEditInput === relatedTargetId) { return; } - setShouldShowMainComposeInputKeyboardAware(true); + setShouldShowComposeInputKeyboardAware(true); }} selection={selection} onSelectionChange={(e) => setSelection(e.nativeEvent.selection)} @@ -343,7 +343,7 @@ function ReportActionItemMessageEdit(props) { onModalHide={() => InteractionManager.runAfterInteractions(() => textInputRef.current.focus())} onEmojiSelected={addEmojiToTextBox} reportAction={props.action} - // Keep focus on the composer when save button is clicked. + // Keep focus on the composer when emoji picker button is clicked. onMouseDown={(e) => e.preventDefault()} /> From e2b8228df5ee6df10393eeaed48f6e50d0cfd50d Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Wed, 26 Jul 2023 16:55:23 -0500 Subject: [PATCH 7/9] fix: reverting to use of nativeID for EmojiPickerButton --- src/components/EmojiPicker/EmojiPickerButton.js | 8 ++++---- src/pages/home/report/ReportActionItemMessageEdit.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index f22792160634..32a794911fd9 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -14,8 +14,8 @@ const propTypes = { /** Flag to disable the emoji picker button */ isDisabled: PropTypes.bool, - /** Mouse event handler */ - onMouseDown: PropTypes.func, + /** Id to use for the emoji picker button */ + nativeID: PropTypes.string, /** * ReportAction for EmojiPicker. @@ -29,8 +29,8 @@ const propTypes = { const defaultProps = { isDisabled: false, + nativeID: '', reportAction: {}, - onMouseDown: undefined, }; function EmojiPickerButton(props) { @@ -43,8 +43,8 @@ function EmojiPickerButton(props) { style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]} disabled={props.isDisabled} onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, () => {}, props.reportAction)} + nativeID={props.nativeID} accessibilityLabel={props.translate('reportActionCompose.emoji')} - onMouseDown={props.onMouseDown} > {({hovered, pressed}) => ( { setIsFocused(false); const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id'); - if (messageEditInput === relatedTargetId) { + if (_.contains([messageEditInput, emojiButtonID], relatedTargetId)) { return; } setShouldShowComposeInputKeyboardAware(true); @@ -343,8 +344,7 @@ function ReportActionItemMessageEdit(props) { onModalHide={() => InteractionManager.runAfterInteractions(() => textInputRef.current.focus())} onEmojiSelected={addEmojiToTextBox} reportAction={props.action} - // Keep focus on the composer when emoji picker button is clicked. - onMouseDown={(e) => e.preventDefault()} + nativeID={emojiButtonID} /> From b9fe0fde7efb6f0007c18b779d2bc9f58a68f318 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Wed, 26 Jul 2023 20:27:00 -0500 Subject: [PATCH 8/9] fix: emoji picker active action to empty when hide emoji picker --- src/components/EmojiPicker/EmojiPicker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js index 285e0a6f4b8c..e6a9c998416e 100644 --- a/src/components/EmojiPicker/EmojiPicker.js +++ b/src/components/EmojiPicker/EmojiPicker.js @@ -74,6 +74,7 @@ const EmojiPicker = forwardRef((props, ref) => { } emojiPopoverAnchor.current = null; setIsEmojiPickerVisible(false); + setReportAction({}); }; /** From 38df7ac93bad94ee7c692ca041f611b5c8b0bbed Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Fri, 28 Jul 2023 12:03:15 -0500 Subject: [PATCH 9/9] fix: revert last commit --- src/components/EmojiPicker/EmojiPicker.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js index e6a9c998416e..285e0a6f4b8c 100644 --- a/src/components/EmojiPicker/EmojiPicker.js +++ b/src/components/EmojiPicker/EmojiPicker.js @@ -74,7 +74,6 @@ const EmojiPicker = forwardRef((props, ref) => { } emojiPopoverAnchor.current = null; setIsEmojiPickerVisible(false); - setReportAction({}); }; /**