fix(input validation): improve prsitine state support

fix #411
morewings · Aug 2, 2024 · 74dcc25 · 74dcc25
1 parent baafb2b
commit 74dcc25
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 21 deletions.
diff --git a/src/internal/inputs/useValidation.ts b/src/internal/inputs/useValidation.ts
@@ -100,7 +100,8 @@ const getMode = (validation: ValidationProps['validation']) => {
 
 export const useValidation = <TEvent extends FormEvent, TElement extends HTMLInputElement>({
     validation,
-}: ValidationProps) => {
+    hasValidators,
+}: ValidationProps & {hasValidators: boolean}) => {
     const validatorFn = createValidatorFn(validation);
     const mode = getMode(validation);
 
@@ -111,11 +112,14 @@ export const useValidation = <TEvent extends FormEvent, TElement extends HTMLInp
     useHandleFormReset(setValidity);
 
     // reportValidity gets invoked only if validation is set to custom validator fn
-    const reportValidity = useCallback((event: TEvent) => {
-        const isValid = (event.target as TElement).reportValidity();
-        const nextValidationState = isValid ? ValidationState.valid : ValidationState.error;
-        setValidity(nextValidationState);
-    }, []);
+    const reportValidity = useCallback(
+        (event: TEvent) => {
+            const isValid = (event.target as TElement).reportValidity();
+            const nextValidationState = isValid ? ValidationState.valid : ValidationState.error;
+            hasValidators && setValidity(nextValidationState);
+        },
+        [hasValidators]
+    );
 
     const {createValidatorAsync, createValidatorSync, createValidatorExternal} = useValidatorFn({
         validatorFn,

diff --git a/src/lib/InputCheckbox/InputCheckbox.tsx b/src/lib/InputCheckbox/InputCheckbox.tsx
@@ -53,7 +53,13 @@ export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
         ref
     ) => {
         const id = useInternalId(idProp);
-        const {validateInteractive, validity, setValidity} = useValidation({validation});
+
+        const hasValidators = Boolean(validation) || Boolean(required);
+
+        const {validateInteractive, validity, setValidity} = useValidation({
+            validation,
+            hasValidators,
+        });
 
         const inputRef = useInternalRef(ref);
         useRevalidateOnFormChange(inputRef, validateInteractive, revalidateOnFormChange);

diff --git a/src/lib/InputColor/InputColor.tsx b/src/lib/InputColor/InputColor.tsx
@@ -58,8 +58,11 @@ export const InputColor = forwardRef<HTMLInputElement, Props>(
         },
         ref
     ) => {
+        const hasValidators = Boolean(validation);
+
         const {validity, setValidity, validateTextual} = useValidation({
             validation,
+            hasValidators,
         });
         const id = useInternalId(idProp);
 

diff --git a/src/lib/InputDate/InputDate.tsx b/src/lib/InputDate/InputDate.tsx
@@ -45,10 +45,15 @@ export const InputDate = forwardRef<HTMLInputElement, Props>(
         },
         ref
     ) => {
+        const hasValidators =
+            Boolean(validation) ||
+            typeof nativeProps.min === 'string' ||
+            typeof nativeProps.max === 'string';
+
         const id = useInternalId(idProp);
         const labelRef = useRef<HTMLLabelElement>(null);
 
-        const {validateTextual, validity, setValidity} = useValidation({validation});
+        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});
 
         const inputRef = useInternalRef(ref);
 

diff --git a/src/lib/InputFile/InputFile.tsx b/src/lib/InputFile/InputFile.tsx
@@ -61,8 +61,10 @@ export const InputFile = forwardRef<HTMLInputElement, Props>(
 
         const id = useInternalId(idProp);
         const [filename, setFileName] = useState('');
+        const hasValidators = Boolean(validation);
         const {validateTextual, validity, setValidity} = useValidation({
             validation,
+            hasValidators,
         });
         const inputRef = useInternalRef(ref);
         useExternalValidation({errorMessage, inputRef, setValidity, validation});

diff --git a/src/lib/InputNumber/InputNumber.stories.tsx b/src/lib/InputNumber/InputNumber.stories.tsx
@@ -21,13 +21,13 @@ const meta = {
         required: false,
         readOnly: false,
         disabled: false,
-        min: -100,
-        max: 100,
-        step: 10,
         size: 9,
     },
     argTypes: {
         value: {control: 'text'},
+        step: {control: 'number'},
+        min: {control: 'number'},
+        max: {control: 'number'},
         defaultValue: {
             table: {
                 disable: true,

diff --git a/src/lib/InputNumber/InputNumber.tsx b/src/lib/InputNumber/InputNumber.tsx
@@ -44,15 +44,25 @@ export const InputNumber = forwardRef<HTMLInputElement, Props>(
             onKeyUp = () => {},
             defaultValue,
             size = 10,
-            step = 1,
+            step,
             revalidateOnFormChange,
             errorMessage = ValidationState.error,
             validation,
             ...nativeProps
         },
         ref
     ) => {
-        const {validateTextual, validity, setValidity} = useValidation({validation});
+        const hasValidators =
+            Boolean(validation) ||
+            Boolean(nativeProps.required) ||
+            typeof nativeProps.min === 'number' ||
+            typeof nativeProps.min === 'string' ||
+            typeof nativeProps.max === 'number' ||
+            typeof nativeProps.max === 'string' ||
+            typeof step === 'number' ||
+            typeof step === 'string';
+
+        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});
 
         const inputRef = useInternalRef(ref);
         useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);

diff --git a/src/lib/InputPassword/InputPassword.tsx b/src/lib/InputPassword/InputPassword.tsx
@@ -53,7 +53,14 @@ export const InputPassword = forwardRef<HTMLInputElement, Props>(
         },
         ref
     ) => {
-        const {validateTextual, validity, setValidity} = useValidation({validation});
+        const hasValidators =
+            Boolean(validation) ||
+            Boolean(nativeProps.required) ||
+            typeof nativeProps.maxLength === 'number' ||
+            typeof nativeProps.minLength === 'number' ||
+            typeof nativeProps.pattern === 'string';
+
+        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});
 
         const inputRef = useInternalRef(ref);
         useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);

diff --git a/src/lib/InputRange/InputRange.tsx b/src/lib/InputRange/InputRange.tsx
@@ -76,7 +76,9 @@ export const InputRange = forwardRef<HTMLInputElement, Props>(
         },
         ref
     ) => {
-        const {validateTextual, validity, setValidity} = useValidation({validation});
+        const hasValidators = Boolean(validation) || Boolean(nativeProps.required);
+
+        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});
 
         const inputRef = useInternalRef(ref);
         useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);

diff --git a/src/lib/InputText/InputText.tsx b/src/lib/InputText/InputText.tsx
@@ -23,9 +23,9 @@ export type Props = DataAttributes &
     CallbackPropsTextual &
     ValidationProps & {
         /**
-         * Define a type of TextInput. Allows developer to optionally set one from supported
+         * Define a type of TextInput. Allows a developer to optionally set one from supported
          * text-like input types instead of default 'text'.
-         * Non-text types such as `number` or `week` are not allowed.
+         * Non-text types such as `number` or `week` aren't allowed.
          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
          */
         type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
@@ -67,8 +67,16 @@ export const InputText = forwardRef<HTMLInputElement, Props>(
     ) => {
         const inputRef = useInternalRef(ref);
 
+        const hasValidators =
+            Boolean(validation) ||
+            Boolean(required) ||
+            typeof nativeProps.maxLength === 'number' ||
+            typeof nativeProps.minLength === 'number' ||
+            typeof nativeProps.pattern === 'string';
+
         const {validateTextual, validity, setValidity} = useValidation({
             validation,
+            hasValidators,
         });
 
         useExternalValidation({errorMessage, inputRef, setValidity, validation});

diff --git a/src/lib/InputTime/InputTime.tsx b/src/lib/InputTime/InputTime.tsx
@@ -43,7 +43,12 @@ export const InputTime = forwardRef<HTMLInputElement, Props>(
         ref
     ) => {
         const inputRef = useInternalRef(ref);
-        const {validity, setValidity, validateTextual} = useValidation({validation});
+        const hasValidators =
+            Boolean(validation) ||
+            typeof nativeProps.min === 'string' ||
+            typeof nativeProps.max === 'string';
+
+        const {validity, setValidity, validateTextual} = useValidation({validation, hasValidators});
 
         useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);
         useExternalValidation({errorMessage, inputRef, setValidity, validation});

diff --git a/src/lib/Select/Select.tsx b/src/lib/Select/Select.tsx
@@ -68,7 +68,9 @@ export const Select = forwardRef<HTMLSelectElement, Props>(
             [size]
         );
 
-        const {validateTextual, validity, setValidity} = useValidation({validation});
+        const hasValidators = Boolean(validation);
+
+        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});
 
         const inputRef = useInternalRef(ref);
         useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);

diff --git a/src/lib/Textarea/Textarea.tsx b/src/lib/Textarea/Textarea.tsx
@@ -72,7 +72,13 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
         },
         ref
     ) => {
-        const {validateTextual, validity, setValidity} = useValidation({validation});
+        const hasValidators =
+            Boolean(validation) ||
+            Boolean(nativeProps.required) ||
+            typeof nativeProps.maxLength === 'number' ||
+            typeof nativeProps.minLength === 'number';
+
+        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});
 
         const inputRef = useInternalRef(ref);
         useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);

diff --git a/templates/Input/TemplateName.tsx b/templates/Input/TemplateName.tsx
@@ -36,7 +36,13 @@ export const TemplateName = forwardRef<HTMLInputElement, Props>(
         },
         ref
     ) => {
-        const {validateTextual, validity, setValidity} = useValidation({validation});
+        const hasValidators =
+            Boolean(validation) ||
+            Boolean(nativeProps.required) ||
+            typeof nativeProps.maxLength === 'number' ||
+            typeof nativeProps.minLength === 'number' ||
+            typeof nativeProps.pattern === 'string';
+        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});
         const ValidationIcon = useValidationIcon(validity);
         const handleChange = useCallback(
             (event: ChangeEvent<HTMLInputElement>) => {