feat: validate field on mount (#80)

babylonlabs-io · Jan 3, 2025 · 242e540 · 242e540
1 parent 257e589
commit 242e540
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 6 deletions.
diff --git a/.changeset/late-moles-invent.md b/.changeset/late-moles-invent.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+feat: validate field on mount
diff --git a/src/widgets/form/NumberField/NumberField.tsx b/src/widgets/form/NumberField/NumberField.tsx
@@ -28,6 +28,7 @@ export function NumberField({
   prefix,
   shouldUnregister,
   state,
+  validateOnMount,
 }: NumberFieldProps) {
   const {
     ref,
@@ -36,7 +37,7 @@ export function NumberField({
     invalid,
     onChange,
     onBlur,
-  } = useField({ name, defaultValue, autoFocus, shouldUnregister });
+  } = useField({ name, defaultValue, autoFocus, shouldUnregister, validateOnMount });
 
   const fieldState = invalid ? "error" : state;
   const fieldHint = invalid ? error : hint;

diff --git a/src/widgets/form/SelectField/SelectField.tsx b/src/widgets/form/SelectField/SelectField.tsx
@@ -33,6 +33,7 @@ export function SelectField({
   placeholder,
   shouldUnregister,
   state,
+  validateOnMount,
   onOpen,
   onClose,
   renderSelectedOption,
@@ -44,7 +45,7 @@ export function SelectField({
     invalid,
     onChange,
     onBlur,
-  } = useField({ name, defaultValue, autoFocus, shouldUnregister });
+  } = useField({ name, defaultValue, autoFocus, shouldUnregister, validateOnMount });
 
   const fieldState = invalid ? "error" : state;
   const fieldHint = invalid ? error : hint;

diff --git a/src/widgets/form/TextField/TextField.tsx b/src/widgets/form/TextField/TextField.tsx
@@ -26,6 +26,7 @@ export function TextField({
   prefix,
   shouldUnregister,
   state,
+  validateOnMount,
 }: TextFieldProps) {
   const {
     ref,
@@ -34,7 +35,7 @@ export function TextField({
     invalid,
     onChange,
     onBlur,
-  } = useField({ name, defaultValue, autoFocus, shouldUnregister });
+  } = useField({ name, defaultValue, autoFocus, shouldUnregister, validateOnMount });
 
   const fieldState = invalid ? "error" : state;
   const fieldHint = invalid ? error : hint;

diff --git a/src/widgets/form/hooks.ts b/src/widgets/form/hooks.ts
@@ -7,6 +7,7 @@ interface FieldProps<V> {
   disabled?: boolean;
   autoFocus?: boolean;
   shouldUnregister?: boolean;
+  validateOnMount?: boolean;
 }
 
 export function useField<V = string>({
@@ -15,16 +16,19 @@ export function useField<V = string>({
   disabled = false,
   autoFocus = false,
   shouldUnregister = false,
+  validateOnMount = true,
 }: FieldProps<V>) {
-  const { setFocus } = useFormContext();
+  const { setFocus, trigger } = useFormContext();
   const { field, fieldState } = useController({ name, defaultValue, disabled, shouldUnregister });
   const { invalid, isTouched, error } = fieldState;
 
   useEffect(() => {
-    if (autoFocus) {
+    if (validateOnMount) {
+      trigger(name, { shouldFocus: autoFocus });
+    } else if (autoFocus) {
       setFocus(name);
     }
-  }, [name]);
+  }, [name, validateOnMount]);
 
   return {
     ...field,

diff --git a/src/widgets/form/types.ts b/src/widgets/form/types.ts
@@ -11,4 +11,5 @@ export interface FieldProps {
   hint?: string | JSX.Element;
   shouldUnregister?: boolean;
   state?: "default" | "error" | "warning";
+  validateOnMount?: boolean;
 }