fix: TextField validateOnChange with defaultValue executed on start (#2411)

* fix: TextField validateOnChange on web

* code review

Author: AmitShwarts

package.json

@@ -15,6 +15,7 @@
   },
   "scripts": {
     "start": "watchman watch-del-all && export DEV_MODE=true && react-native start",
+    "start:web": "npm --prefix webDemo run start",
     "ios": "react-native run-ios",
     "android": "react-native run-android",
     "iPad": "react-native run-ios --simulator='iPad Pro (9.7 inch)'",

src/incubator/TextField/useFieldState.ts

@@ -23,14 +23,14 @@ export default function useFieldState({
     if (Constants.isWeb && !props.value && props.defaultValue && props.defaultValue !== value) {
       setValue(props.defaultValue);
 
-      if (validateOnChange) {
+      if (validateOnStart) {
         validateField(props.defaultValue);
       }
     }
 
     /* On purpose listen only to props.defaultValue change */
     /* eslint-disable-next-line react-hooks/exhaustive-deps*/
-  }, [props.defaultValue, validateOnChange]);
+  }, [props.defaultValue, validateOnStart]);
 
   useEffect(() => {
     if (validateOnStart) {
@@ -42,7 +42,7 @@ export default function useFieldState({
     if (props.value !== value) {
       setValue(props.value);
 
-      if (validateOnChange) {
+      if (validateOnChange && value !== props.defaultValue) {
         validateField(props.value);
       }
     }

webDemo/src/App.tsx

@@ -173,7 +173,14 @@ const itemsToRender: ItemToRender[] = [
             migrate
             defaultValue={defaultValue}
             containerStyle={{marginBottom: 10}}
-            placeholder="type here..."
+            placeholder="Enter your email..."
+            validationMessage={['Email is required', 'Email is invalid']}
+            validationMessagePosition={'top'}
+            enableErrors
+            validate={['required', 'email']}
+            validateOnStart={false}
+            validateOnChange
+            validateOnBlur={false}
             onChangeText={(text: string) => {
               console.log(text);
             }}