Merge pull request Expensify#84872 from Expensify/claude-fixAngleBracketTaxValidation

Fix: Enable strict HTML tag validation on tax name forms

Author: MonilBhavsar

src/components/TextPicker/TextSelectorModal.tsx

@@ -33,6 +33,7 @@ function TextSelectorModal({
     customValidate,
     enabledWhenOffline = true,
     allowHTML,
+    shouldUseStrictHtmlTagValidation = false,
     autoGrowHeight,
     ...rest
 }: TextSelectorModalProps) {
@@ -164,6 +165,7 @@ function TextSelectorModal({
                     addBottomSafeAreaPadding
                     enterKeyEventListenerPriority={0}
                     allowHTML={allowHTML}
+                    shouldUseStrictHtmlTagValidation={shouldUseStrictHtmlTagValidation}
                     shouldValidateOnBlur={!isClosing}
                 >
                     {!!subtitle && (

src/components/TextPicker/index.tsx

@@ -20,6 +20,7 @@ function TextPicker({
     interactive = true,
     required = false,
     customValidate,
+    shouldUseStrictHtmlTagValidation,
     wrapperStyle,
     numberOfLinesTitle,
     titleStyle,
@@ -80,6 +81,7 @@ function TextPicker({
                 disabled={disabled}
                 required={required}
                 customValidate={customValidate}
+                shouldUseStrictHtmlTagValidation={shouldUseStrictHtmlTagValidation}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...rest}
             />

src/components/TextPicker/types.ts

@@ -38,6 +38,9 @@ type TextSelectorModalProps = {
 
     /** Whether HTML is allowed in form inputs */
     allowHTML?: boolean;
+
+    /** Whether to use strict HTML tag validation regex */
+    shouldUseStrictHtmlTagValidation?: boolean;
 } & Pick<MenuItemBaseProps, 'subtitle' | 'description'> &
     Omit<TextProps, 'ref'>;
 
@@ -81,6 +84,9 @@ type TextPickerProps = {
     /** Whether HTML is allowed in form inputs */
     allowHTML?: boolean;
 
+    /** Whether to use strict HTML tag validation regex */
+    shouldUseStrictHtmlTagValidation?: boolean;
+
     /** Reference to the outer element */
     ref?: ForwardedRef<View>;
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'subtitle' | 'description' | 'interactive' | 'wrapperStyle' | 'numberOfLinesTitle' | 'titleStyle' | 'descriptionTextStyle'> &

src/pages/workspace/reports/CreateReportFieldsPage.tsx

@@ -182,6 +182,7 @@ function WorkspaceCreateReportFieldsPage({
                     enabledWhenOffline
                     shouldValidateOnBlur={false}
                     addBottomSafeAreaPadding
+                    shouldUseStrictHtmlTagValidation
                 >
                     {({inputValues}) => (
                         <View style={styles.mhn5}>
@@ -198,6 +199,7 @@ function WorkspaceCreateReportFieldsPage({
                                 role={CONST.ROLE.PRESENTATION}
                                 required
                                 customValidate={validateName}
+                                shouldUseStrictHtmlTagValidation
                             />
                             <InputWrapper
                                 InputComponent={TypeSelector}

src/pages/workspace/taxes/NamePage.tsx

@@ -92,6 +92,7 @@ function NamePage({
                     validate={validate}
                     shouldHideFixErrorsAlert
                     addBottomSafeAreaPadding
+                    shouldUseStrictHtmlTagValidation
                 >
                     <View style={styles.mb4}>
                         <InputWrapper

src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -98,6 +98,7 @@ function WorkspaceCreateTaxPage({
                             enabledWhenOffline
                             shouldValidateOnBlur={false}
                             addBottomSafeAreaPadding
+                            shouldUseStrictHtmlTagValidation
                         >
                             <View style={styles.mhn5}>
                                 <InputWrapper
@@ -112,6 +113,7 @@ function WorkspaceCreateTaxPage({
                                     role={CONST.ROLE.PRESENTATION}
                                     required
                                     customValidate={customValidateForName}
+                                    shouldUseStrictHtmlTagValidation
                                 />
                                 <InputWrapper
                                     InputComponent={AmountPicker}