Add Task Title Validation on Main Composer Text Change

src/CONST.ts

@@ -294,6 +294,9 @@ type OnboardingMessage = {
     type?: string;
 };
 
+const EMAIL_WITH_OPTIONAL_DOMAIN =
+    /(?=((?=[\w'#%+-]+(?:\.[\w'#%+-]+)*@?)[\w.'#%+-]{1,64}(?:@(?:(?=[a-z\d]+(?:-+[a-z\d]+)*\.)(?:[a-z\d-]{1,63}\.)+[a-z]{2,63}))?(?= |_|\b))(?<end>.*))\S{3,254}(?=\k<end>$)/;
+
 const CONST = {
     HEIC_SIGNATURES: [
         '6674797068656963', // 'ftypheic' - Indicates standard HEIC file
@@ -3036,6 +3039,15 @@ const CONST = {
         get EXPENSIFY_POLICY_DOMAIN_NAME() {
             return new RegExp(`${EXPENSIFY_POLICY_DOMAIN}([a-zA-Z0-9]+)\\${EXPENSIFY_POLICY_DOMAIN_EXTENSION}`);
         },
+
+        /**
+         * Matching task rule by group
+         * Group 1: Start task rule with []
+         * Group 2: Optional email group between \s+....\s* start rule with @+valid email or short mention
+         * Group 3: Title is remaining characters
+         */
+        // The regex is copied from the expensify-common CONST file, but the domain is optional to accept short mention
+        TASK_TITLE_WITH_OPTONAL_SHORT_MENTION: `^\\[\\]\\s+(?:@(?:${EMAIL_WITH_OPTIONAL_DOMAIN}))?\\s*([\\s\\S]*)`,
     },
 
     PRONOUNS: {

src/components/ExceededCommentLength.tsx

@@ -4,7 +4,11 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import Text from './Text';
 
-function ExceededCommentLength() {
+type ExceededCommentLengthProps = {
+    maxCommentLength?: number;
+};
+
+function ExceededCommentLength({maxCommentLength = CONST.MAX_COMMENT_LENGTH}: ExceededCommentLengthProps) {
     const styles = useThemeStyles();
     const {numberFormat, translate} = useLocalize();
 
@@ -13,7 +17,7 @@ function ExceededCommentLength() {
             style={[styles.textMicro, styles.textDanger, styles.chatItemComposeSecondaryRow, styles.mlAuto, styles.pl2]}
             numberOfLines={1}
         >
-            {translate('composer.commentExceededMaxLength', {formattedMaxLength: numberFormat(CONST.MAX_COMMENT_LENGTH)})}
+            {translate('composer.commentExceededMaxLength', {formattedMaxLength: numberFormat(maxCommentLength)})}
         </Text>
     );
 }

src/hooks/useHandleExceedMaxTaskTitleLength.ts

@@ -0,0 +1,25 @@
+import debounce from 'lodash/debounce';
+import {useCallback, useMemo, useState} from 'react';
+import CONST from '@src/CONST';
+
+const useHandleExceedMaxTaskTitleLength = () => {
+    const [hasExceededMaxTitleLength, setHasExceededMaxTitleLength] = useState(false);
+
+    const handleValueChange = useCallback((value: string) => {
+        const match = value.match(CONST.REGEX.TASK_TITLE_WITH_OPTONAL_SHORT_MENTION);
+        if (match) {
+            const title = match[3] ? match[3].trim().replace(/\n/g, ' ') : undefined;
+            const exceeded = title ? title.length > CONST.TITLE_CHARACTER_LIMIT : false;
+            setHasExceededMaxTitleLength(exceeded);
+            return true;
+        }
+        setHasExceededMaxTitleLength(false);
+        return false;
+    }, []);
+
+    const validateTitleMaxLength = useMemo(() => debounce(handleValueChange, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME, {leading: true}), [handleValueChange]);
+
+    return {hasExceededMaxTitleLength, validateTitleMaxLength};
+};
+
+export default useHandleExceedMaxTaskTitleLength;

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -23,6 +23,7 @@ import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebounce from '@hooks/useDebounce';
 import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
+import useHandleExceedMaxTaskTitleLength from '@hooks/useHandleExceedMaxTaskTitleLength';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -172,6 +173,8 @@ function ReportActionCompose({
      * Shows red borders and prevents the comment from being sent
      */
     const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength();
+    const {hasExceededMaxTitleLength, validateTitleMaxLength} = useHandleExceedMaxTaskTitleLength();
+    const [exceededMaxLength, setExceededMaxLength] = useState<number | null>(null);
 
     const suggestionsRef = useRef<SuggestionsRef>(null);
     const composerRef = useRef<ComposerRef>();
@@ -306,6 +309,18 @@ function ReportActionCompose({
         onComposerFocus?.();
     }, [onComposerFocus]);
 
+    useEffect(() => {
+        if (hasExceededMaxTitleLength) {
+            setExceededMaxLength(CONST.TITLE_CHARACTER_LIMIT);
+            return;
+        }
+        if (hasExceededMaxCommentLength) {
+            setExceededMaxLength(CONST.MAX_COMMENT_LENGTH);
+            return;
+        }
+        setExceededMaxLength(null);
+    }, [hasExceededMaxTitleLength, hasExceededMaxCommentLength]);
+
     // We are returning a callback here as we want to incoke the method on unmount only
     useEffect(
         () => () => {
@@ -333,7 +348,7 @@ function ReportActionCompose({
 
     const hasReportRecipient = !isEmptyObject(reportRecipient);
 
-    const isSendDisabled = isCommentEmpty || isBlockedFromConcierge || !!disabled || hasExceededMaxCommentLength;
+    const isSendDisabled = isCommentEmpty || isBlockedFromConcierge || !!disabled || !!exceededMaxLength;
 
     // Note: using JS refs is not well supported in reanimated, thus we need to store the function in a shared value
     // useSharedValue on web doesn't support functions, so we need to wrap it in an object.
@@ -399,9 +414,12 @@ function ReportActionCompose({
             if (value.length === 0 && isComposerFullSize) {
                 Report.setIsComposerFullSize(reportID, false);
             }
+            if (validateTitleMaxLength(value)) {
+                return;
+            }
             validateCommentMaxLength(value, {reportID});
         },
-        [isComposerFullSize, reportID, validateCommentMaxLength],
+        [isComposerFullSize, reportID, validateCommentMaxLength, validateTitleMaxLength],
     );
 
     return (
@@ -436,15 +454,15 @@ function ReportActionCompose({
                                 styles.flexRow,
                                 styles.chatItemComposeBox,
                                 isComposerFullSize && styles.chatItemFullComposeBox,
-                                hasExceededMaxCommentLength && styles.borderColorDanger,
+                                !!exceededMaxLength && styles.borderColorDanger,
                             ]}
                         >
                             <AttachmentModal
                                 headerTitle={translate('reportActionCompose.sendAttachment')}
                                 onConfirm={addAttachment}
                                 onModalShow={() => setIsAttachmentPreviewActive(true)}
                                 onModalHide={onAttachmentPreviewClose}
-                                shouldDisableSendButton={hasExceededMaxCommentLength}
+                                shouldDisableSendButton={!!exceededMaxLength}
                             >
                                 {({displayFileInModal}) => (
                                     <>
@@ -463,7 +481,7 @@ function ReportActionCompose({
                                             onAddActionPressed={onAddActionPressed}
                                             onItemSelected={onItemSelected}
                                             actionButtonRef={actionButtonRef}
-                                            shouldDisableAttachmentItem={hasExceededMaxCommentLength}
+                                            shouldDisableAttachmentItem={!!exceededMaxLength}
                                         />
                                         <ComposerWithSuggestions
                                             ref={(ref) => {
@@ -549,7 +567,7 @@ function ReportActionCompose({
                     >
                         {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                         <ReportTypingIndicator reportID={reportID} />
-                        {hasExceededMaxCommentLength && <ExceededCommentLength />}
+                        {!!exceededMaxLength && <ExceededCommentLength maxCommentLength={exceededMaxLength} />}
                     </View>
                 </OfflineWithFeedback>
                 {!isSmallScreenWidth && (

src/pages/home/report/ReportFooter.tsx

@@ -124,18 +124,7 @@ function ReportFooter({
 
     const handleCreateTask = useCallback(
         (text: string): boolean => {
-            /**
-             * Matching task rule by group
-             * Group 1: Start task rule with []
-             * Group 2: Optional email group between \s+....\s* start rule with @+valid email or short mention
-             * Group 3: Title is remaining characters
-             */
-            // The regex is copied from the expensify-common CONST file, but the domain is optional to accept short mention
-            const emailWithOptionalDomainRegex =
-                /(?=((?=[\w'#%+-]+(?:\.[\w'#%+-]+)*@?)[\w.'#%+-]{1,64}(?:@(?:(?=[a-z\d]+(?:-+[a-z\d]+)*\.)(?:[a-z\d-]{1,63}\.)+[a-z]{2,63}))?(?= |_|\b))(?<end>.*))\S{3,254}(?=\k<end>$)/;
-            const taskRegex = `^\\[\\]\\s+(?:@(?:${emailWithOptionalDomainRegex.source}))?\\s*([\\s\\S]*)`;
-
-            const match = text.match(taskRegex);
+            const match = text.match(CONST.REGEX.TASK_TITLE_WITH_OPTONAL_SHORT_MENTION);
             if (!match) {
                 return false;
             }