fix defaultValue and onChange (mostly), only use number input on numb…

…er fields
oxidecomputer · Oct 5, 2023 · aac3c51 · aac3c51
1 parent 9faad6b
commit aac3c51
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/app/components/form/fields/DiskSizeField.tsx b/app/components/form/fields/DiskSizeField.tsx
@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { FieldPath, FieldValues } from 'react-hook-form'
+import type { FieldPath, FieldPathByValue, FieldValues } from 'react-hook-form'
 
 import { MAX_DISK_SIZE_GiB } from '@oxide/api'
 
@@ -21,7 +21,7 @@ interface DiskSizeProps<
 
 export function DiskSizeField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPathByValue<TFieldValues, number>
 >({ required = true, name, minSize = 1, ...props }: DiskSizeProps<TFieldValues, TName>) {
   return (
     <NumberField

diff --git a/app/components/form/fields/NumberField.tsx b/app/components/form/fields/NumberField.tsx
@@ -7,7 +7,7 @@
  */
 import cn from 'classnames'
 import { useId } from 'react'
-import type { FieldPath, FieldValues } from 'react-hook-form'
+import type { FieldPathByValue, FieldValues } from 'react-hook-form'
 import { Controller } from 'react-hook-form'
 
 import type { NumberInputProps as UINumberFieldProps } from '@oxide/ui'
@@ -19,7 +19,8 @@ import type { TextFieldProps } from './TextField'
 
 export function NumberField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  // can only be used on fields with number values
+  TName extends FieldPathByValue<TFieldValues, number>
 >({
   name,
   label = capitalize(name),
@@ -60,7 +61,7 @@ export function NumberField<
  */
 export const NumberFieldInner = <
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPathByValue<TFieldValues, number>
 >({
   name,
   label = capitalize(name),
@@ -69,6 +70,9 @@ export const NumberFieldInner = <
   description,
   required,
   id: idProp,
+  // only taking these out of props because spreading them in messes up the types
+  defaultValue: _defaultValue,
+  onChange: _onChange,
   ...props
 }: TextFieldProps<TFieldValues, TName> & UINumberFieldProps) => {
   const generatedId = useId()