fix expand button disappear after clicking send

abdel-h66 · Oct 3, 2023 · 49ad7e7 · 49ad7e7
1 parent ee81a28
commit 49ad7e7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 32 deletions.
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
@@ -91,7 +91,7 @@ function ComposerWithSuggestions({
     isFullComposerAvailable,
     setIsFullComposerAvailable,
     setIsCommentEmpty,
-    submitForm,
+    handleSendMessage,
     shouldShowComposeInput,
     measureParentContainer,
     // Refs
@@ -312,7 +312,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
@@ -331,7 +331,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
@@ -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 */
@@ -314,6 +315,23 @@ function ReportActionCompose({
 
     const isSendDisabled = isCommentEmpty || isBlockedFromConcierge || disabled || hasExceededMaxCommentLength;
 
+    const handleSendMessage = useCallback(() => {
+        'worklet';
+
+        if (isSendDisabled) {
+            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]);
+
     return (
         <View
             ref={containerRef}
@@ -381,7 +399,7 @@ function ReportActionCompose({
                                     isFullComposerAvailable={isFullComposerAvailable}
                                     setIsFullComposerAvailable={setIsFullComposerAvailable}
                                     setIsCommentEmpty={setIsCommentEmpty}
-                                    submitForm={submitForm}
+                                    handleSendMessage={handleSendMessage}
                                     shouldShowComposeInput={shouldShowComposeInput}
                                     onFocus={onFocus}
                                     onBlur={onBlur}
@@ -409,10 +427,7 @@ function ReportActionCompose({
                     )}
                     <SendButton
                         isDisabled={isSendDisabled}
-                        setIsCommentEmpty={setIsCommentEmpty}
-                        resetFullComposerSize={resetFullComposerSize}
-                        submitForm={submitForm}
-                        animatedRef={animatedRef}
+                        handleSendMessage={handleSendMessage}
                     />
                 </View>
                 <View

diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js
@@ -17,35 +17,17 @@ const propTypes = {
     /** Whether the button is disabled */
     isDisabled: PropTypes.bool.isRequired,
 
-    /** Reference to the animated view */
-    animatedRef: PropTypes.func.isRequired,
-
-    /** Sets the isCommentEmpty flag to true */
-    setIsCommentEmpty: PropTypes.func.isRequired,
-
-    /** resets the composer to normal size */
-    resetFullComposerSize: PropTypes.func.isRequired,
-
-    /** Submits the form */
-    submitForm: PropTypes.func.isRequired,
+    /** Handle clicking on send button */
+    handleSendMessage: PropTypes.func.isRequired,
 };
 
-function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, resetFullComposerSize, submitForm}) {
+function SendButton({isDisabled: isDisabledProp, handleSendMessage}) {
     const {translate} = useLocalize();
 
     const Tap = Gesture.Tap()
         .enabled()
         .onEnd(() => {
-            '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
@@ -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,