diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 605fb284bf24..4595d2098d74 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -60,12 +60,15 @@ function BaseTextInput( multiline = false, autoCorrect = true, prefixCharacter = '', + suffixCharacter = '', inputID, isMarkdownEnabled = false, excludedMarkdownStyles = [], shouldShowClearButton = false, prefixContainerStyle = [], prefixStyle = [], + suffixContainerStyle = [], + suffixStyle = [], contentWidth, loadingSpinnerStyle, ...props @@ -86,7 +89,7 @@ function BaseTextInput( // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const initialValue = value || defaultValue || ''; - const initialActiveLabel = !!forceActiveLabel || initialValue.length > 0 || !!prefixCharacter; + const initialActiveLabel = !!forceActiveLabel || initialValue.length > 0 || !!prefixCharacter || !!suffixCharacter; const isMultiline = multiline || autoGrowHeight; const [isFocused, setIsFocused] = useState(false); @@ -140,13 +143,13 @@ function BaseTextInput( const deactivateLabel = useCallback(() => { const inputValue = value ?? ''; - if (!!forceActiveLabel || inputValue.length !== 0 || prefixCharacter) { + if (!!forceActiveLabel || inputValue.length !== 0 || prefixCharacter || suffixCharacter) { return; } animateLabel(styleConst.INACTIVE_LABEL_TRANSLATE_Y, styleConst.INACTIVE_LABEL_SCALE); isLabelActive.current = false; - }, [animateLabel, forceActiveLabel, prefixCharacter, value]); + }, [animateLabel, forceActiveLabel, prefixCharacter, suffixCharacter, value]); const onFocus = (event: NativeSyntheticEvent) => { inputProps.onFocus?.(event); @@ -249,7 +252,7 @@ function BaseTextInput( // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const inputHelpText = errorText || hint; - const placeholderValue = !!prefixCharacter || isFocused || !hasLabel || (hasLabel && forceActiveLabel) ? placeholder : undefined; + const placeholderValue = !!prefixCharacter || !!suffixCharacter || isFocused || !hasLabel || (hasLabel && forceActiveLabel) ? placeholder : undefined; const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, @@ -261,7 +264,7 @@ function BaseTextInput( ]); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(prefixCharacter) + styles.pl1.paddingLeft); - + const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight); return ( <> @@ -349,6 +352,7 @@ function BaseTextInput( inputStyle, (!hasLabel || isMultiline) && styles.pv0, inputPaddingLeft, + inputPaddingRight, inputProps.secureTextEntry && styles.secureInput, !isMultiline && {height, lineHeight: undefined}, @@ -378,6 +382,17 @@ function BaseTextInput( defaultValue={defaultValue} markdownStyle={markdownStyle} /> + {!!suffixCharacter && ( + + + {suffixCharacter} + + + )} {isFocused && !isReadOnly && shouldShowClearButton && !!value && setValue('')} />} {!!inputProps.isLoading && (