Merge pull request Expensify#76515 from software-mansion-labs/fix/saml-metadata-text-input

fix: Invalid character error in SAML Identity Provider Metadata input + initial cursor position

Author: NikkiWines

src/components/TextPicker/TextSelectorModal.tsx

@@ -10,10 +10,10 @@ import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {moveSelectionToEnd, scrollToBottom} from '@libs/InputUtils';
 import {getFieldRequiredErrors} from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -32,6 +32,8 @@ function TextSelectorModal({
     required = false,
     customValidate,
     enabledWhenOffline = true,
+    allowHTML,
+    autoGrowHeight,
     ...rest
 }: TextSelectorModalProps) {
     const {translate} = useLocalize();
@@ -40,11 +42,10 @@ function TextSelectorModal({
 
     const [currentValue, setValue] = useState(value);
 
-    const inputRef = useRef<BaseTextInputRef | null>(null);
+    const inputRef = useRef<TextInputType | null>(null);
     const inputValueRef = useRef(value);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-    const inputCallbackRef = (ref: BaseTextInputRef | null) => {
+    const inputCallbackRef = (ref: TextInputType | null) => {
         inputRef.current = ref;
     };
 
@@ -97,7 +98,11 @@ function TextSelectorModal({
             focusTimeoutRef.current = setTimeout(() => {
                 if (inputRef.current && isVisible) {
                     inputRef.current.focus();
-                    (inputRef.current as TextInputType).setSelection?.(inputValueRef.current?.length ?? 0, inputValueRef.current?.length ?? 0);
+                    inputRef.current.setSelection?.(inputValueRef.current?.length ?? 0, inputValueRef.current?.length ?? 0);
+                    if (autoGrowHeight) {
+                        scrollToBottom(inputRef.current);
+                        moveSelectionToEnd(inputRef.current);
+                    }
                 }
                 return () => {
                     if (!focusTimeoutRef.current || !isVisible) {
@@ -106,7 +111,7 @@ function TextSelectorModal({
                     clearTimeout(focusTimeoutRef.current);
                 };
             }, CONST.ANIMATED_TRANSITION);
-        }, [isVisible]),
+        }, [isVisible, autoGrowHeight]),
     );
 
     const handleSubmit = useCallback(
@@ -155,6 +160,7 @@ function TextSelectorModal({
                     shouldHideFixErrorsAlert
                     addBottomSafeAreaPadding
                     enterKeyEventListenerPriority={0}
+                    allowHTML={allowHTML}
                 >
                     {!!subtitle && (
                         <View style={styles.pb4}>
@@ -169,6 +175,7 @@ function TextSelectorModal({
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...rest}
                         inputID={rest.inputID}
+                        autoGrowHeight={autoGrowHeight}
                     />
                 </FormProvider>
             </ScreenWrapper>

src/components/TextPicker/types.ts

@@ -35,6 +35,9 @@ type TextSelectorModalProps = {
 
     /** Whether the form should be actionable when offline */
     enabledWhenOffline?: boolean;
+
+    /** Whether HTML is allowed in form inputs */
+    allowHTML?: boolean;
 } & Pick<MenuItemBaseProps, 'subtitle' | 'description'> &
     Omit<TextProps, 'ref'>;
 
@@ -75,6 +78,9 @@ type TextPickerProps = {
     /** Whether the form should be actionable when offline */
     enabledWhenOffline?: boolean;
 
+    /** Whether HTML is allowed in form inputs */
+    allowHTML?: boolean;
+
     /** Reference to the outer element */
     ref?: ForwardedRef<View>;
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'subtitle' | 'description' | 'interactive' | 'wrapperStyle' | 'numberOfLinesTitle' | 'titleStyle' | 'descriptionTextStyle'> &

src/pages/domain/Saml/SamlConfigurationDetailsSectionContent.tsx

@@ -80,6 +80,7 @@ function SamlConfigurationDetailsSectionContent({accountID, domainName, shouldSh
                 maxLength={Infinity}
                 enabledWhenOffline={false}
                 required
+                allowHTML
             />
 
             <MenuItemWithTopDescription