diff --git a/src/components/TextPicker/TextSelectorModal.tsx b/src/components/TextPicker/TextSelectorModal.tsx index b1e0e3a493863..159d993e9299b 100644 --- a/src/components/TextPicker/TextSelectorModal.tsx +++ b/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(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; }; @@ -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 && ( @@ -169,6 +175,7 @@ function TextSelectorModal({ // eslint-disable-next-line react/jsx-props-no-spreading {...rest} inputID={rest.inputID} + autoGrowHeight={autoGrowHeight} /> 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 />