TextField - handle value change to undefined (#3676)

* TextField - handle value change to undefined

* Fix test

Author: M-i-k-e-l

src/components/textField/__tests__/index.driver.spec.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {render} from '@testing-library/react-native';
 import Constants from '../../../commons/Constants';
 import Assets from '../../../assets';
@@ -15,14 +15,19 @@ const helperText = 'Helper Text';
 
 function TestCase(textFieldProps?: TextFieldProps) {
   const [value, setValue] = useState(textFieldProps?.value);
+
+  useEffect(() => {
+    setValue(textFieldProps?.value);
+  }, [textFieldProps?.value]);
+
   return (
     <View>
       <TextField {...textFieldProps} testID={TEXT_FIELD_TEST_ID} value={value} onChangeText={setValue}/>
     </View>
   );
 }
 
-const validate = jest.fn((value: string) => {
+const validate = jest.fn((value?: string) => {
   return !!value;
 });
 
@@ -214,6 +219,18 @@ describe('TextField', () => {
         expect(textFieldDriver.getValidationMessage().getText()).toEqual('mock message');
       });
 
+      it('should render validationMessage when input is requires after changing the value to undefined', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={'Some text'} validate={'required'} validationMessage={'mock message'} enableErrors validateOnChange/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(false);
+        expect(textFieldDriver.getValidationMessage().getText()).toEqual('');
+
+        renderTree.rerender(<TestCase {...defaultProps} validate={'required'} validationMessage={'mock message'} enableErrors validateOnChange/>);
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(true);
+        expect(textFieldDriver.getValidationMessage().getText()).toEqual('mock message');
+      });
+
       it('should display validation error message when validation fail after blur', () => {
         const renderTree = render(<TestCase {...defaultProps} validate={'email'} validationMessage={'email is invalid'} enableErrors validateOnBlur/>);
         const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
@@ -490,7 +507,7 @@ describe('TextField', () => {
       const props = {
         ...defaultProps,
         value: '10000',
-        formatter: value => priceFormatter.format(Number(value))
+        formatter: (value?: string) => priceFormatter.format(Number(value))
       };
 
       it('should format value while not focused based on formatter prop', () => {

src/components/textField/useFieldState.ts

@@ -65,9 +65,9 @@ export default function useFieldState({
 
       if (validateOnChange) {
         if (validationDebounceTime) {
-          debouncedValidateField(propsValue);
+          debouncedValidateField(propsValue ?? '');
         } else {
-          validateField(propsValue);
+          validateField(propsValue ?? '');
         }
       }
     }