diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 9e2693f2d333..0c12fee0cfb0 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -11,7 +11,6 @@ import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; -import InlineErrorText from '../InlineErrorText'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -30,6 +29,8 @@ class BaseTextInput extends Component { passwordHidden: props.secureTextEntry, textInputWidth: 0, prefixWidth: 0, + + // Value should be kept in state for the autoGrow feature to work - https://github.com/Expensify/App/pull/8232#issuecomment-1077282006 value, }; @@ -63,7 +64,7 @@ class BaseTextInput extends Component { componentDidUpdate() { // Activate or deactivate the label when value is changed programmatically from outside // Only update when value prop is provided - if (this.props.value === undefined || this.state.value === this.props.value) { + if (_.isUndefined(this.props.value) || this.state.value === this.props.value) { return; } @@ -188,6 +189,8 @@ class BaseTextInput extends Component { // eslint-disable-next-line react/forbid-foreign-prop-types const inputProps = _.omit(this.props, _.keys(baseTextInputPropTypes.propTypes)); const hasLabel = Boolean(this.props.label.length); + const inputHelpText = this.props.errorText || this.props.hint; + const formHelpStyles = this.props.errorText ? styles.formError : styles.formHelp; const placeholder = (this.props.prefixCharacter || this.state.isFocused || !hasLabel || (hasLabel && this.props.forceActiveLabel)) ? this.props.placeholder : null; const textInputContainerStyles = _.reduce([ styles.textInputContainer, @@ -286,9 +289,11 @@ class BaseTextInput extends Component { - - {this.props.errorText} - + {!_.isEmpty(inputHelpText) && ( + + {inputHelpText} + + )} {/* Text input component doesn't support auto grow by default.