fix(form): handle number and boolean changes in elementProps (#3580)

sanity-io · Sep 14, 2022 · 796227e · 796227e
1 parent 3ff700e
commit 796227e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/packages/sanity/src/form/inputs/BooleanInput.tsx b/packages/sanity/src/form/inputs/BooleanInput.tsx
@@ -1,9 +1,6 @@
-/* eslint-disable import/no-unresolved */
-
-import React, {useCallback} from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import {Box, Card, Checkbox, Flex, Switch} from '@sanity/ui'
-import {set} from '../patch'
 import {BooleanInputProps} from '../types'
 import {FormFieldHeaderText} from '../components/formField/FormFieldHeaderText'
 import {FormFieldStatus} from '../components/formField/FormFieldStatus'
@@ -17,16 +14,9 @@ const ZeroLineHeightBox = styled(Box)`
 `
 
 export function BooleanInput(props: BooleanInputProps) {
-  const {id, value, schemaType, readOnly, onChange, elementProps} = props
+  const {id, value, schemaType, readOnly, elementProps} = props
   const layout = schemaType.options?.layout || 'switch'
 
-  const handleChange = useCallback(
-    (event: React.SyntheticEvent<HTMLInputElement>) => {
-      onChange(set(event.currentTarget.checked))
-    },
-    [onChange]
-  )
-
   const indeterminate = typeof value !== 'boolean'
   const checked = value || false
 
@@ -39,7 +29,6 @@ export function BooleanInput(props: BooleanInputProps) {
           <LayoutSpecificInput
             label={schemaType.title}
             {...elementProps}
-            onChange={handleChange}
             indeterminate={indeterminate}
             checked={checked}
             style={{margin: -4}}

diff --git a/packages/sanity/src/form/members/fields/PrimitiveField.tsx b/packages/sanity/src/form/members/fields/PrimitiveField.tsx
@@ -10,6 +10,7 @@ import {
 import {FormPatch, PatchEvent, set, unset} from '../../patch'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {useFormCallbacks} from '../../studio/contexts/FormCallbacks'
+import {isBooleanSchemaType, isNumberSchemaType} from '@sanity/types'
 
 /**
  * Responsible for creating inputProps and fieldProps to pass to ´renderInput´ and ´renderField´ for a primitive field/input
@@ -54,11 +55,20 @@ export function PrimitiveField(props: {
 
   const handleNativeChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.currentTarget.value
+      let inputValue: number | string | boolean = event.currentTarget.value
+      if (isNumberSchemaType(member.field.schemaType)) {
+        inputValue = event.currentTarget.valueAsNumber
+      } else if (isBooleanSchemaType(member.field.schemaType)) {
+        inputValue = event.currentTarget.checked
+      }
 
-      onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()).prefixAll(member.name))
+      // `valueAsNumber` returns `NaN` on empty input
+      const hasEmptyValue =
+        inputValue === '' || (typeof inputValue === 'number' && isNaN(inputValue))
+
+      onChange(PatchEvent.from(hasEmptyValue ? unset() : set(inputValue)).prefixAll(member.name))
     },
-    [member.name, onChange]
+    [member.name, member.field.schemaType, onChange]
   )
 
   const validationError =

diff --git a/packages/sanity/src/form/members/items/ArrayOfPrimitivesItem.tsx b/packages/sanity/src/form/members/items/ArrayOfPrimitivesItem.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../types'
 import {insert, PatchArg, PatchEvent, set, unset} from '../../patch'
 import {useFormCallbacks} from '../../studio/contexts/FormCallbacks'
+import {isBooleanSchemaType, isNumberSchemaType} from '@sanity/types'
 
 /**
  * @alpha
@@ -66,11 +67,20 @@ export function ArrayOfPrimitivesItem(props: PrimitiveMemberItemProps) {
 
   const handleNativeChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.currentTarget.value
+      let inputValue: number | string | boolean = event.currentTarget.value
+      if (isNumberSchemaType(member.item.schemaType)) {
+        inputValue = event.currentTarget.valueAsNumber
+      } else if (isBooleanSchemaType(member.item.schemaType)) {
+        inputValue = event.currentTarget.checked
+      }
 
-      onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()).prefixAll(member.index))
+      // `valueAsNumber` returns `NaN` on empty input
+      const hasEmptyValue =
+        inputValue === '' || (typeof inputValue === 'number' && isNaN(inputValue))
+
+      onChange(PatchEvent.from(hasEmptyValue ? unset() : set(inputValue)).prefixAll(member.index))
     },
-    [member.index, onChange]
+    [member.index, member.item.schemaType, onChange]
   )
 
   const elementProps = useMemo(

diff --git a/packages/sanity/test/form/renderInput.tsx b/packages/sanity/test/form/renderInput.tsx
@@ -82,7 +82,7 @@ export async function renderInput(props: {
   const onBlur = jest.fn()
   const onChange = jest.fn()
   const onFocus = jest.fn()
-  const onDOMChange = jest.fn()
+  const onDOMChange = jest.fn((...args) => onChange(...args))
 
   const onPathBlur = jest.fn()
   const onPathFocus = jest.fn()