fix: controlled numberFieldProps

form-atoms · Apr 8, 2023 · 487c577 · 487c577
1 parent 2433dc2
commit 487c577
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/fields/number-field/useNumberFieldProps.ts b/src/fields/number-field/useNumberFieldProps.ts
@@ -13,4 +13,4 @@ const getNumber = (event: ChangeEvent<HTMLInputElement>) => {
 };
 
 export const useNumberFieldProps = (field: NumberField) =>
-  useFieldProps(field, getNumber);
+  useFieldProps(field, getNumber, "");
diff --git a/src/hooks/use-field-props/useFieldProps.ts b/src/hooks/use-field-props/useFieldProps.ts
@@ -13,7 +13,8 @@ export type FieldProps<Field extends ZodField<any>> = {
 
 export function useFieldProps<
   Field extends ZodField<any>,
-  Element extends HTMLElement = HTMLInputElement
+  Element extends HTMLElement = HTMLInputElement,
+  Empty extends string | undefined = undefined
 >(
   fieldAtom: Field,
   // support element to be union via distributive conditional types
@@ -22,7 +23,8 @@ export function useFieldProps<
         event: ChangeEvent<Element>,
         value: ZodFieldValue<Field>
       ) => ZodFieldValue<Field>
-    : never
+    : never,
+  empty?: Empty
 ) {
   const { actions, state } = useField<ZodFieldValue<Field>>(fieldAtom);
   const field = useAtomValue(fieldAtom);
@@ -36,7 +38,7 @@ export function useFieldProps<
     () => ({
       id: `${fieldAtom}`,
       name,
-      value: state.value,
+      value: state.value ?? empty,
       required,
       "aria-required": required,
       "aria-invalid": state.validateStatus === "invalid",