fix(form-builder): remove empty value on array item dialog close

sanity-io · Apr 13, 2021 · 714b1f3 · 714b1f3 · vercel · Apr 13, 2021
1 parent 9891a95
commit 714b1f3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/packages/@sanity/form-builder/src/hooks/useScrollIntoViewOnFocusWithin.ts b/packages/@sanity/form-builder/src/hooks/useScrollIntoViewOnFocusWithin.ts
@@ -11,7 +11,7 @@ const SCROLL_OPTIONS = {scrollMode: 'if-needed'} as const
  * @param hasFocusWithin A boolean indicating whether we have has focus within the currently edited value
  */
 export function useScrollIntoViewOnFocusWithin(
-  elementRef: {current?: HTMLElement | null},
+  elementRef: {current: HTMLElement | null},
   hasFocusWithin: boolean
 ): void {
   return useDidUpdate(

diff --git a/packages/@sanity/form-builder/src/inputs/arrays/ArrayOfObjectsInput/item/ArrayItem.tsx b/packages/@sanity/form-builder/src/inputs/arrays/ArrayOfObjectsInput/item/ArrayItem.tsx
@@ -11,7 +11,7 @@ import {ArrayMember} from '../types'
 import {EMPTY_ARRAY} from '../../../../utils/empty'
 import {hasFocusWithinPath} from '../../../../utils/focusUtils'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
-import {getItemType} from './helpers'
+import {getItemType, isEmpty} from './helpers'
 import {EditDialog} from './EditDialog'
 import {ItemRow} from './ItemRow'
 import {ItemCell} from './ItemCell'
@@ -66,7 +66,12 @@ export function ArrayItem(props: ArrayInputListItemProps) {
 
   const handleFocus = useCallback(() => emitFocus(), [emitFocus])
   const handleEditOpen = useCallback(() => emitFocus([FOCUS_TERMINATOR]), [emitFocus])
-  const handleEditClose = useCallback(() => emitFocus(), [emitFocus])
+  const handleEditClose = useCallback(() => {
+    if (isEmpty(value)) {
+      onRemove(value)
+    }
+    emitFocus()
+  }, [value, onRemove, emitFocus])
 
   const handleChange = useCallback(
     (event: PatchEvent, valueOverride?: ArrayMember) =>

diff --git a/packages/@sanity/form-builder/src/inputs/arrays/ArrayOfObjectsInput/item/helpers.ts b/packages/@sanity/form-builder/src/inputs/arrays/ArrayOfObjectsInput/item/helpers.ts
@@ -3,7 +3,7 @@ import {resolveTypeName} from '../../../../utils/resolveTypeName'
 import {IGNORE_KEYS} from './constants'
 
 // eslint-disable-next-line @typescript-eslint/ban-types
-export function isEmpty(value: any): value is Record<never, never> {
+export function isEmpty(value: Record<string, unknown>): value is Record<never, never> {
   return Object.keys(value).every((key) => IGNORE_KEYS.includes(key))
 }