diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 873d8c4d5079..78f6edcf7dd3 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -440,7 +440,7 @@ function ReportScreen({
policies={policies}
/>
) : (
-
+
)}
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
index 6e103f77c068..a4777556dda7 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
@@ -90,7 +90,7 @@ function ComposerWithSuggestions({
isFullComposerAvailable,
setIsFullComposerAvailable,
setIsCommentEmpty,
- submitForm,
+ handleSendMessage,
shouldShowComposeInput,
measureParentContainer,
// Refs
@@ -328,7 +328,7 @@ function ComposerWithSuggestions({
// Submit the form when Enter is pressed
if (e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && !e.shiftKey) {
e.preventDefault();
- submitForm();
+ handleSendMessage();
}
// Trigger the edit box for last sent message if ArrowUp is pressed and the comment is empty and Chronos is not in the participants
@@ -347,7 +347,7 @@ function ComposerWithSuggestions({
}
}
},
- [isKeyboardShown, isSmallScreenWidth, parentReportActions, report, reportActions, reportID, submitForm, suggestionsRef, valueRef],
+ [isKeyboardShown, isSmallScreenWidth, parentReportActions, report, reportActions, reportID, handleSendMessage, suggestionsRef, valueRef],
);
const onSelectionChange = useCallback(
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index dedccc65a390..b43400287269 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
import _ from 'underscore';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
-import {useAnimatedRef} from 'react-native-reanimated';
+import {runOnJS, useAnimatedRef} from 'react-native-reanimated';
import {PortalHost} from '@gorhom/portal';
import styles from '../../../../styles/styles';
import ONYXKEYS from '../../../../ONYXKEYS';
@@ -37,6 +37,7 @@ import getModalState from '../../../../libs/getModalState';
import useWindowDimensions from '../../../../hooks/useWindowDimensions';
import * as EmojiPickerActions from '../../../../libs/actions/EmojiPickerAction';
import getDraftComment from '../../../../libs/ComposerUtils/getDraftComment';
+import updatePropsPaperWorklet from '../../../../libs/updatePropsPaperWorklet';
const propTypes = {
/** A method to call when the form is submitted */
@@ -72,6 +73,8 @@ const propTypes = {
/** The type of action that's pending */
pendingAction: PropTypes.oneOf(['add', 'update', 'delete']),
+ /** /** Whetjer the report is ready for display */
+ isReportReadyForDisplay: PropTypes.bool,
...withCurrentUserPersonalDetailsPropTypes,
};
@@ -83,6 +86,7 @@ const defaultProps = {
isComposerFullSize: false,
pendingAction: null,
shouldShowComposeInput: true,
+ isReportReadyForDisplay: true,
...withCurrentUserPersonalDetailsDefaultProps,
};
@@ -105,6 +109,7 @@ function ReportActionCompose({
reportID,
reportActions,
shouldShowComposeInput,
+ isReportReadyForDisplay,
}) {
const {translate} = useLocalize();
const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
@@ -314,6 +319,23 @@ function ReportActionCompose({
const isSendDisabled = isCommentEmpty || isBlockedFromConcierge || disabled || hasExceededMaxCommentLength;
+ const handleSendMessage = useCallback(() => {
+ 'worklet';
+
+ if (isSendDisabled || !isReportReadyForDisplay) {
+ return;
+ }
+
+ const viewTag = animatedRef();
+ const viewName = 'RCTMultilineTextInputView';
+ const updates = {text: ''};
+ // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state
+ runOnJS(setIsCommentEmpty)(true);
+ runOnJS(resetFullComposerSize)();
+ updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread
+ runOnJS(submitForm)();
+ }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]);
+
return (
{
- 'worklet';
-
- const viewTag = animatedRef();
- const viewName = 'RCTMultilineTextInputView';
- const updates = {text: ''};
- // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state
- runOnJS(setIsCommentEmpty)(true);
- runOnJS(resetFullComposerSize)();
- updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread
- runOnJS(submitForm)();
+ handleSendMessage();
});
return (
diff --git a/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js b/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js
index 0c8f36114c44..017b5aecb4ae 100644
--- a/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js
+++ b/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js
@@ -72,7 +72,7 @@ const propTypes = {
setIsCommentEmpty: PropTypes.func.isRequired,
/** A method to call when the form is submitted */
- submitForm: PropTypes.func.isRequired,
+ handleSendMessage: PropTypes.func.isRequired,
/** Whether the compose input is shown or not */
shouldShowComposeInput: PropTypes.bool.isRequired,
diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index 51a8490162e5..04e444a73c6b 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -38,6 +38,9 @@ const propTypes = {
/** Whether user interactions should be disabled */
shouldDisableCompose: PropTypes.bool,
+ /** Whetjer the report is ready for display */
+ isReportReadyForDisplay: PropTypes.bool,
+
...windowDimensionsPropTypes,
};
@@ -48,6 +51,7 @@ const defaultProps = {
pendingAction: null,
shouldShowComposeInput: true,
shouldDisableCompose: false,
+ isReportReadyForDisplay: true,
};
function ReportFooter(props) {
@@ -86,6 +90,7 @@ function ReportFooter(props) {
pendingAction={props.pendingAction}
isComposerFullSize={props.isComposerFullSize}
disabled={props.shouldDisableCompose}
+ isReportReadyForDisplay={props.isReportReadyForDisplay}
/>