fix: support placeholder in numberinput

saas-js · Oct 18, 2023 · be52e78 · be52e78
1 parent 654ad18
commit be52e78
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/.changeset/tiny-seals-beam.md b/.changeset/tiny-seals-beam.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/forms': patch
+'@saas-ui/react': patch
+---
+
+Fixed issue where placeholder would not be passed to the NumberInputField
diff --git a/packages/saas-ui-forms/src/default-fields.tsx b/packages/saas-ui-forms/src/default-fields.tsx
@@ -34,8 +34,6 @@ import {
 } from './select'
 
 import { createField } from './create-field'
-import { ObjectField } from './object-field'
-import { ArrayField } from './array-field'
 
 export interface InputFieldProps extends InputProps {
   type?: string
@@ -59,12 +57,10 @@ export const InputField = createField<InputFieldProps>(
   })
 )
 
-export interface NumberInputFieldProps extends NumberInputProps {
-  type: 'number'
-}
-
-export const NumberInputField = createField<NumberInputFieldProps>(
-  NumberInput,
+export const NumberInputField = createField<NumberInputProps>(
+  forwardRef((props, ref) => {
+    return <NumberInput ref={ref} {...props} />
+  }),
   {
     isControlled: true,
   }

diff --git a/packages/saas-ui-forms/src/number-input/number-input.tsx b/packages/saas-ui-forms/src/number-input/number-input.tsx
@@ -8,6 +8,7 @@ import {
   NumberIncrementStepper,
   NumberDecrementStepper,
   NumberInputProps as ChakraNumberInputProps,
+  NumberInputFieldProps,
 } from '@chakra-ui/react'
 
 import { ChevronDownIcon, ChevronUpIcon } from '@saas-ui/core'
@@ -25,6 +26,14 @@ interface NumberInputOptions {
    * Render a custom decrement icon.
    */
   decrementIcon?: React.ReactNode
+  /**
+   * The placeholder text when no value is selected.
+   */
+  placeholder?: string
+  /**
+   * Props to pass to the NumberInputField component.
+   */
+  fieldProps?: NumberInputFieldProps
 }
 
 export interface NumberInputProps
@@ -36,12 +45,16 @@ export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
     hideStepper,
     incrementIcon = <ChevronUpIcon />,
     decrementIcon = <ChevronDownIcon />,
+    placeholder,
+    fieldProps: _fieldProps,
     ...rest
   } = props
 
+  const fieldProps = { placeholder, ..._fieldProps }
+
   return (
     <ChakraNumberInput {...rest} ref={ref}>
-      <NumberInputField />
+      <NumberInputField {...fieldProps} />
 
       {!hideStepper && (
         <NumberInputStepper>

diff --git a/packages/saas-ui-forms/stories/field.stories.tsx b/packages/saas-ui-forms/stories/field.stories.tsx
@@ -59,7 +59,14 @@ export const Basic = () => (
     {({ Field }) => (
       <FormLayout>
         <Field name="text" label="Text" type="text" />
-        <Field name="number" label="Number" type="text" min={1} max={10} />
+        <Field
+          name="number"
+          label="Number"
+          type="number"
+          min={1}
+          max={10}
+          placeholder="Number"
+        />
         <Field name="textarea" label="Textarea" type="textarea" />
         <Field name="switch" label="Switch" type="switch" />
         <Field

diff --git a/packages/saas-ui-forms/tests/create-field.test.tsx b/packages/saas-ui-forms/tests/create-field.test.tsx
@@ -45,6 +45,11 @@ const inputProps: FieldProps = {
   type: 'text',
 }
 
+const numberProps: FieldProps = {
+  name: 'test',
+  type: 'number',
+}
+
 test('should have correct event handler type on Field', async () => {
   expectTypeOf<(typeof selectProps)['onChange']>().toEqualTypeOf<
     ((value: string | string[]) => void) | undefined
@@ -53,4 +58,8 @@ test('should have correct event handler type on Field', async () => {
   expectTypeOf<(typeof inputProps)['onChange']>().toEqualTypeOf<
     React.ChangeEventHandler<HTMLInputElement> | undefined
   >()
+
+  expectTypeOf<(typeof numberProps)['onChange']>().toEqualTypeOf<
+    ((valueAsString: string, valueAsNumber: number) => void) | undefined
+  >()
 })