Merge pull request #8232 from rushatgabhane/revert-remove-hint

Revert remove hint
Expensify · Mar 28, 2022 · e392f2c · e392f2c
2 parents 52a7e05 + 16b4eac
commit e392f2c
Showing 1 changed file with 10 additions and 5 deletions.
diff --git 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 {
                             </View>
                         </TouchableWithoutFeedback>
                     </View>
-                    <InlineErrorText styles={[styles.ph3]}>
-                        {this.props.errorText}
-                    </InlineErrorText>
+                    {!_.isEmpty(inputHelpText) && (
+                        <Text style={[formHelpStyles, styles.mt1, styles.ph3]}>
+                            {inputHelpText}
+                        </Text>
+                    )}
                 </View>
                 {/*
                     Text input component doesn't support auto grow by default.