TextField - fix for centered input (#3182)

* TextField - fix for centered input

* add Note

* update snapshot tests

* don't retain validation space if has bottomAccessory

* update snapshots

* fix text alignment with charcounter

Author: Inbal-Tish

demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -1982,7 +1982,7 @@ exports[`TextField Screen renders screen 1`] = `
               undefined,
               undefined,
               [
-                undefined,
+                {},
                 undefined,
                 {
                   "flex": 1,
@@ -2103,7 +2103,7 @@ exports[`TextField Screen renders screen 1`] = `
                   "flexDirection": "row",
                 },
                 [
-                  undefined,
+                  {},
                   [
                     [
                       {
@@ -2144,6 +2144,7 @@ exports[`TextField Screen renders screen 1`] = `
                   }
                 }
                 editable={true}
+                maxLength={20}
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
@@ -2178,6 +2179,7 @@ exports[`TextField Screen renders screen 1`] = `
                 underlineColorAndroid="transparent"
                 validate="required"
                 validateOnBlur={true}
+                validateOnChange={true}
                 validationMessage="This field is required. That means you have to enter some value"
               />
             </View>
@@ -2264,7 +2266,41 @@ exports[`TextField Screen renders screen 1`] = `
                   undefined,
                 ]
               }
-            />
+            >
+              <Text
+                $textNeutral={true}
+                fsTagName="unmask"
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "color": "#20303C",
+                      "writingDirection": "ltr",
+                    },
+                    undefined,
+                    {
+                      "color": "#6E7881",
+                    },
+                    undefined,
+                    undefined,
+                    {},
+                    undefined,
+                    undefined,
+                    undefined,
+                    [
+                      {
+                        "flexGrow": 1,
+                        "textAlign": "right",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                testID="undefined.charCounter"
+              >
+                0/20
+              </Text>
+            </View>
           </View>
         </View>
         <View
@@ -3361,39 +3397,6 @@ exports[`TextField Screen renders screen 1`] = `
               ]
             }
           >
-            <Text
-              $textDangerLight={true}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "color": "#20303C",
-                    "writingDirection": "ltr",
-                  },
-                  undefined,
-                  {
-                    "color": "#FC3D2F",
-                  },
-                  undefined,
-                  undefined,
-                  {},
-                  undefined,
-                  undefined,
-                  undefined,
-                  [
-                    {
-                      "flexShrink": 1,
-                      "minHeight": 20,
-                    },
-                    [
-                      undefined,
-                      undefined,
-                    ],
-                  ],
-                ]
-              }
-              testID="undefined.validationMessage"
-            />
             <Text
               style={
                 [
@@ -6006,6 +6009,7 @@ exports[`TextField Screen renders screen 1`] = `
           </View>
         </View>
         <View
+          center={true}
           row={true}
           spread={true}
           style={
@@ -6018,22 +6022,22 @@ exports[`TextField Screen renders screen 1`] = `
               {},
               {},
               {
+                "alignItems": "center",
                 "flexDirection": "row",
-                "justifyContent": "space-between",
+                "justifyContent": "center",
               },
               undefined,
             ]
           }
         >
           <View
+            flexG={true}
             style={
               [
                 undefined,
                 undefined,
                 undefined,
-                {
-                  "flex": 1,
-                },
+                undefined,
                 undefined,
                 {},
                 {},

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -209,11 +209,14 @@ export default class TextFieldScreen extends Component {
             validate="required"
             validationMessage="This field is required. That means you have to enter some value"
             containerStyle={{flex: 1}}
+            validateOnChange
             validationMessagePosition={errorPosition}
             helperText={'Enter first and last name'}
             validationIcon={{source: Assets.icons.demo.exclamation, style: {marginTop: 1}}}
             topTrailingAccessory={<Icon source={Assets.icons.demo.info} size={16}/>}
             preset={preset}
+            maxLength={20}
+            showCharCounter
           />
           <Button
             outline

src/components/textField/index.tsx

@@ -80,7 +80,7 @@ const TextField = (props: InternalTextFieldProps) => {
     enableErrors, // TODO: rename to enableValidation
     validationMessageStyle,
     validationMessagePosition = ValidationMessagePosition.BOTTOM,
-    retainValidationSpace = !helperText,
+    retainValidationSpace = !helperText && !bottomAccessory,
     // Char Counter
     showCharCounter,
     charCounterStyle,
@@ -123,11 +123,11 @@ const TextField = (props: InternalTextFieldProps) => {
   const hidePlaceholder = shouldHidePlaceholder(props, fieldState.isFocused);
   const retainTopMessageSpace = !floatingPlaceholder && isEmpty(trim(label));
   const centeredContainerStyle = centered && styles.centeredContainer;
-  const centeredTextStyle = centered && styles.centeredText;
+  const centeredTextStyle = centered && !showCharCounter && styles.centeredText;
   const _labelStyle = useMemo(() => [labelStyle, centeredTextStyle], [labelStyle, centeredTextStyle]);
   const _validationMessageStyle = useMemo(() => [validationMessageStyle, centeredTextStyle],
     [validationMessageStyle, centeredTextStyle]);
-  const hasValue = fieldState.value !== undefined;
+  const hasValue = fieldState.value !== undefined; // NOTE: not pressable if centered without a value (so can't center placeholder)
   const inputStyle = useMemo(() => [typographyStyle, colorStyle, others.style, hasValue && centeredTextStyle],
     [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
@@ -208,8 +208,8 @@ const TextField = (props: InternalTextFieldProps) => {
           {trailingAccessory}
           {/* </View> */}
         </View>
-        <View row spread>
-          <View flex>
+        <View row spread center={centered}>
+          <View flex={!centered} flexG={centered}>
             {validationMessagePosition === ValidationMessagePosition.BOTTOM && (
               <ValidationMessage
                 enableErrors={enableErrors}