Fix/ TextField (incubator) validation message on start (#1613)

* fix vadliation message on start * make validationMessage controlled by the user
wix · Oct 20, 2021 · 897689a · 897689a
1 parent cabfbe2
commit 897689a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/generatedTypes/src/incubator/TextField/Presenter.d.ts b/generatedTypes/src/incubator/TextField/Presenter.d.ts
@@ -1,5 +1,5 @@
 import { FieldContextType } from './FieldContext';
 import { ColorType, Validator } from './types';
 export declare function getColorByState(color?: ColorType, context?: FieldContextType): string | undefined;
-export declare function validate(value?: string, validator?: Validator | Validator[], validationMessage?: string | string[]): [boolean, number?];
+export declare function validate(value?: string, validator?: Validator | Validator[]): [boolean, number?];
 export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | string[] | undefined;
diff --git a/src/incubator/TextField/Presenter.ts b/src/incubator/TextField/Presenter.ts
@@ -23,11 +23,9 @@ export function getColorByState(color?: ColorType, context?: FieldContextType) {
   return finalColor;
 }
 
-export function validate(value?: string,
-  validator?: Validator | Validator[],
-  validationMessage?: string | string[]): [boolean, number?] {
+export function validate(value?: string, validator?: Validator | Validator[]): [boolean, number?] {
   if (_.isUndefined(validator)) {
-    return [!validationMessage, undefined];
+    return [true, undefined];
   }
 
   let _isValid = true;

diff --git a/src/incubator/TextField/__tests__/Presenter.spec.js b/src/incubator/TextField/__tests__/Presenter.spec.js
@@ -2,13 +2,8 @@ import * as uut from '../Presenter';
 
 describe('TextField:Presenter', () => {
   describe('validate', () => {
-    it('should return true if validator and validationMessage are undefined', () => {
+    it('should return true if validator is undefined', () => {
       expect(uut.validate('value', undefined)).toEqual([true, undefined]);
-      expect(uut.validate('value', undefined, undefined)).toEqual([true, undefined]);
-    });
-
-    it('should return false if validator is undefined and there is a validationMessage', () => {
-      expect(uut.validate('value', undefined, 'Error!')).toEqual([false, undefined]);
     });
 
     it('should validate email', () => {
@@ -49,7 +44,7 @@ describe('TextField:Presenter', () => {
     it('should return undefined when there is no validationMessage', () => {
       expect(uut.getRelevantValidationMessage(undefined, 0)).toBeUndefined();
     });
-    
+
     it('should return the validation message when there is no validate method', () => {
       expect(uut.getRelevantValidationMessage('error message', undefined)).toBe('error message');
     });

diff --git a/src/incubator/TextField/index.tsx b/src/incubator/TextField/index.tsx
@@ -171,7 +171,7 @@ const TextField = (props: InternalTextFieldProps) => {
           <ValidationMessage
             enableErrors={enableErrors}
             validate={others.validate}
-            validationMessage={props.validationMessage}
+            validationMessage={others.validationMessage}
             validationMessageStyle={validationMessageStyle}
           />
         )}
@@ -209,7 +209,7 @@ const TextField = (props: InternalTextFieldProps) => {
             <ValidationMessage
               enableErrors={enableErrors}
               validate={others.validate}
-              validationMessage={props.validationMessage}
+              validationMessage={others.validationMessage}
               validationMessageStyle={validationMessageStyle}
               retainSpace
             />

diff --git a/src/incubator/TextField/useFieldState.ts b/src/incubator/TextField/useFieldState.ts
@@ -60,12 +60,12 @@ export default function useFieldState({
   }, [isValid]);
 
   const validateField = useCallback((valueToValidate = value) => {
-    const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate, validationMessage);
+    const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate);
 
     setIsValid(_isValid);
     setFailingValidatorIndex(_failingValidatorIndex);
   },
-  [value, validate, validationMessage]);
+  [value, validate]);
 
   const onFocus = useCallback((...args: any) => {
     setIsFocused(true);
@@ -95,8 +95,14 @@ export default function useFieldState({
   [props.onChangeText, validateOnChange, validateField]);
 
   const fieldState = useMemo(() => {
-    return {value, hasValue: !_.isEmpty(value), isValid, isFocused, failingValidatorIndex};
-  }, [value, isFocused, isValid, failingValidatorIndex]);
+    return {
+      value,
+      hasValue: !_.isEmpty(value),
+      isValid: validationMessage && !validate ? false : isValid,
+      isFocused,
+      failingValidatorIndex
+    };
+  }, [value, isFocused, isValid, failingValidatorIndex, validationMessage, validate]);
 
   return {
     onFocus,