From d12de0ec3762f8d44f46793148c4bdd7ea3f94fa Mon Sep 17 00:00:00 2001 From: mhawryluk Date: Tue, 2 Dec 2025 12:55:44 +0100 Subject: [PATCH 1/3] fix: Invalid character error in SAML Identity Provider Metadata input + initial cursor position --- src/components/TextPicker/TextSelectorModal.tsx | 8 ++++---- src/components/TextPicker/types.ts | 6 ++++++ .../Saml/SamlConfigurationDetailsSectionContent.tsx | 1 + 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/TextPicker/TextSelectorModal.tsx b/src/components/TextPicker/TextSelectorModal.tsx index b1e0e3a493863..6df411da37b04 100644 --- a/src/components/TextPicker/TextSelectorModal.tsx +++ b/src/components/TextPicker/TextSelectorModal.tsx @@ -11,6 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; +import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -32,6 +33,7 @@ function TextSelectorModal({ required = false, customValidate, enabledWhenOffline = true, + allowHTML, ...rest }: TextSelectorModalProps) { const {translate} = useLocalize(); @@ -43,10 +45,7 @@ function TextSelectorModal({ const inputRef = useRef(null); const inputValueRef = useRef(value); const focusTimeoutRef = useRef(null); - - const inputCallbackRef = (ref: BaseTextInputRef | null) => { - inputRef.current = ref; - }; + const {inputCallbackRef} = useAutoFocusInput(true); const hide = useCallback(() => { onClose(); @@ -155,6 +154,7 @@ function TextSelectorModal({ shouldHideFixErrorsAlert addBottomSafeAreaPadding enterKeyEventListenerPriority={0} + allowHTML={allowHTML} > {!!subtitle && ( diff --git a/src/components/TextPicker/types.ts b/src/components/TextPicker/types.ts index ad062108a7cd9..966357566c1c4 100644 --- a/src/components/TextPicker/types.ts +++ b/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 & Omit; @@ -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; } & Pick & diff --git a/src/pages/domain/Saml/SamlConfigurationDetailsSectionContent.tsx b/src/pages/domain/Saml/SamlConfigurationDetailsSectionContent.tsx index 76c255a999ace..b8f86a266596f 100644 --- a/src/pages/domain/Saml/SamlConfigurationDetailsSectionContent.tsx +++ b/src/pages/domain/Saml/SamlConfigurationDetailsSectionContent.tsx @@ -80,6 +80,7 @@ function SamlConfigurationDetailsSectionContent({accountID, domainName, shouldSh maxLength={Infinity} enabledWhenOffline={false} required + allowHTML /> Date: Thu, 4 Dec 2025 11:45:59 +0100 Subject: [PATCH 2/3] Fix autoscroll and cursor setting after closing the modal and reopening it --- src/components/TextPicker/TextSelectorModal.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/TextPicker/TextSelectorModal.tsx b/src/components/TextPicker/TextSelectorModal.tsx index 6df411da37b04..4ff0a9bc59b2f 100644 --- a/src/components/TextPicker/TextSelectorModal.tsx +++ b/src/components/TextPicker/TextSelectorModal.tsx @@ -11,10 +11,10 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; -import useAutoFocusInput from '@hooks/useAutoFocusInput'; 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'; @@ -34,6 +34,7 @@ function TextSelectorModal({ customValidate, enabledWhenOffline = true, allowHTML, + autoGrowHeight, ...rest }: TextSelectorModalProps) { const {translate} = useLocalize(); @@ -45,7 +46,9 @@ function TextSelectorModal({ const inputRef = useRef(null); const inputValueRef = useRef(value); const focusTimeoutRef = useRef(null); - const {inputCallbackRef} = useAutoFocusInput(true); + const inputCallbackRef = (ref: BaseTextInputRef | null) => { + inputRef.current = ref; + }; const hide = useCallback(() => { onClose(); @@ -97,6 +100,10 @@ function TextSelectorModal({ if (inputRef.current && isVisible) { inputRef.current.focus(); (inputRef.current as TextInputType).setSelection?.(inputValueRef.current?.length ?? 0, inputValueRef.current?.length ?? 0); + if (autoGrowHeight) { + scrollToBottom(inputRef.current as TextInputType); + moveSelectionToEnd(inputRef.current as TextInputType); + } } return () => { if (!focusTimeoutRef.current || !isVisible) { @@ -105,7 +112,7 @@ function TextSelectorModal({ clearTimeout(focusTimeoutRef.current); }; }, CONST.ANIMATED_TRANSITION); - }, [isVisible]), + }, [isVisible, autoGrowHeight]), ); const handleSubmit = useCallback( @@ -169,6 +176,7 @@ function TextSelectorModal({ // eslint-disable-next-line react/jsx-props-no-spreading {...rest} inputID={rest.inputID} + autoGrowHeight={autoGrowHeight} /> From 00769579f88c6bcd771cb98e294622470092f108 Mon Sep 17 00:00:00 2001 From: mhawryluk Date: Thu, 4 Dec 2025 13:22:22 +0100 Subject: [PATCH 3/3] Remove type assertions --- src/components/TextPicker/TextSelectorModal.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/TextPicker/TextSelectorModal.tsx b/src/components/TextPicker/TextSelectorModal.tsx index 4ff0a9bc59b2f..159d993e9299b 100644 --- a/src/components/TextPicker/TextSelectorModal.tsx +++ b/src/components/TextPicker/TextSelectorModal.tsx @@ -10,7 +10,6 @@ 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'; @@ -43,10 +42,10 @@ function TextSelectorModal({ const [currentValue, setValue] = useState(value); - const inputRef = useRef(null); + const inputRef = useRef(null); const inputValueRef = useRef(value); const focusTimeoutRef = useRef(null); - const inputCallbackRef = (ref: BaseTextInputRef | null) => { + const inputCallbackRef = (ref: TextInputType | null) => { inputRef.current = ref; }; @@ -99,10 +98,10 @@ 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 as TextInputType); - moveSelectionToEnd(inputRef.current as TextInputType); + scrollToBottom(inputRef.current); + moveSelectionToEnd(inputRef.current); } } return () => {