From 8e54486125efd644ef4cf0b5cc8f284d3416636a Mon Sep 17 00:00:00 2001 From: VH Date: Mon, 17 Jul 2023 13:33:38 +0700 Subject: [PATCH 1/5] Fix the emoji picker does not close when editing message is deleted --- src/components/EmojiPicker/EmojiPickerButton.js | 10 +++++++++- src/pages/home/report/ReportActionItemMessageEdit.js | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index 47dc93ac138a..8660ee7f00c5 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -17,12 +17,20 @@ const propTypes = { /** Id to use for the emoji picker button */ nativeID: PropTypes.string, + /** + * ReportAction for EmojiPicker. + */ + reportAction: PropTypes.shape({ + reportActionID: PropTypes.string.isRequired, + }), + ...withLocalizePropTypes, }; const defaultProps = { isDisabled: false, nativeID: '', + reportAction: {}, }; function EmojiPickerButton(props) { @@ -33,7 +41,7 @@ function EmojiPickerButton(props) { ref={(el) => (emojiPopoverAnchor = el)} style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]} disabled={props.isDisabled} - onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor)} + onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, () => {}, props.reportAction)} nativeID={props.nativeID} accessibilityLabel={props.translate('reportActionCompose.emoji')} > diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index c7b39734961f..b976a3fbbebb 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -346,6 +346,7 @@ function ReportActionItemMessageEdit(props) { onModalHide={() => InteractionManager.runAfterInteractions(() => textInputRef.current.focus())} onEmojiSelected={addEmojiToTextBox} nativeID={emojiButtonID} + reportAction={props.action} /> From 376aa8226a6d03a7e5e8a2662a66e1093aa79d28 Mon Sep 17 00:00:00 2001 From: VH Date: Mon, 17 Jul 2023 20:33:28 +0700 Subject: [PATCH 2/5] Dont mark as required prop --- src/components/EmojiPicker/EmojiPickerButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index 8660ee7f00c5..77e5bfa9ef7d 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -21,7 +21,7 @@ const propTypes = { * ReportAction for EmojiPicker. */ reportAction: PropTypes.shape({ - reportActionID: PropTypes.string.isRequired, + reportActionID: PropTypes.string, }), ...withLocalizePropTypes, From e0f14cd631856dddafa02bf62a06cb0db6ddd854 Mon Sep 17 00:00:00 2001 From: VH Date: Mon, 17 Jul 2023 20:34:59 +0700 Subject: [PATCH 3/5] Show chat compose when editing a message and open emoji picker --- src/pages/home/report/ReportActionItemMessageEdit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index b976a3fbbebb..15a02af9a88b 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -34,6 +34,7 @@ import useLocalize from '../../../hooks/useLocalize'; import useKeyboardState from '../../../hooks/useKeyboardState'; import useWindowDimensions from '../../../hooks/useWindowDimensions'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; +import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; const propTypes = { /** All the data of the action */ @@ -119,7 +120,7 @@ function ReportActionItemMessageEdit(props) { return () => { // Skip if this is not the focused message so the other edit composer stays focused - if (!isFocusedRef.current) { + if (!isFocusedRef.current && !EmojiPickerAction.isActiveReportAction(props.action.reportActionID)) { return; } From 08f8abf036a001f45eab6749aa1336384636d5ea Mon Sep 17 00:00:00 2001 From: VH Date: Mon, 17 Jul 2023 20:44:18 +0700 Subject: [PATCH 4/5] Update comment --- src/pages/home/report/ReportActionItemMessageEdit.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 15a02af9a88b..e476db30a6b0 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -119,7 +119,8 @@ function ReportActionItemMessageEdit(props) { }); return () => { - // Skip if this is not the focused message so the other edit composer stays focused + // Skip if this is not the focused message so the other edit composer stays focused. + // In small screen devices, when EmojiPicker is show, the current edit message will be lost focus, we need to check this case as well. if (!isFocusedRef.current && !EmojiPickerAction.isActiveReportAction(props.action.reportActionID)) { return; } @@ -128,7 +129,7 @@ function ReportActionItemMessageEdit(props) { // to prevent the main composer stays hidden until we swtich to another chat. ComposerActions.setShouldShowComposeInput(true); }; - }, []); + }, [props.action.reportActionID]); /** * Save the draft of the comment. This debounced so that we're not ceaselessly saving your edit. Saving the draft From 2906498dc9b48f4ca068589b855dbf00ef14c58f Mon Sep 17 00:00:00 2001 From: Vinh Hoang Date: Wed, 19 Jul 2023 06:14:30 +0700 Subject: [PATCH 5/5] Update comment Co-authored-by: Marc Glasser --- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index e476db30a6b0..d45f0442f3f7 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -120,7 +120,7 @@ function ReportActionItemMessageEdit(props) { return () => { // Skip if this is not the focused message so the other edit composer stays focused. - // In small screen devices, when EmojiPicker is show, the current edit message will be lost focus, we need to check this case as well. + // In small screen devices, when EmojiPicker is shown, the current edit message will lose focus, we need to check this case as well. if (!isFocusedRef.current && !EmojiPickerAction.isActiveReportAction(props.action.reportActionID)) { return; }