Issue with inserting an item into an array in a custom input component.

5 replies

Last updated: Oct 6, 2020

Can anyone help me here? I’m trying to insert an item into an array in a custom input component but nothing happens. I’m importing PatchEvent like this,

import PatchEvent from 'part:@sanity/form-builder/patch-event'

.And then supposedly firing in an

onAction

handler here;

const handleAction = (field) => {
    const patches = [
      { path: [], type: "setIfMissing", value: [] }, 
      {
        type: "insert",
        items: [{ _type: field.name }],
        path: [-1]
      }
    ]

    PatchEvent.from(patches)
}

But the value is never updated.

AI Update

I can see the issue! You're creating the PatchEvent but not actually calling the onChange handler to apply it. PatchEvent.from() just creates the action - it doesn't automatically update the document. You need to pass it to the onChange prop that your custom input component receives.

Here's the corrected version:

const handleAction = (field) => {
    const patches = [
      { path: [], type: "setIfMissing", value: [] }, 
      {
        type: "insert",
        items: [{ _type: field.name }],
        path: [-1]
      }
    ]

    onChange(PatchEvent.from(patches))  // ← Add this!
}

The onChange function should be passed as a prop to your custom input component from Sanity Studio. Make sure your component signature includes it:

const MyCustomInput = ({ value, onChange, type }) => {
  // your component code
}

Also, heads up: the import syntax you're using (part:@sanity/form-builder/patch-event) is from the older Sanity Studio v2. If you're on Studio v3, you'll want to update to the newer import style. Check out the PatchEvent documentation for the current approach.

For array insertions specifically, you might also want to chain setIfMissing using .prepend() to ensure the array exists before inserting:

const patches = insert([{ _type: field.name }], 'after', [-1])
const patchEvent = PatchEvent.from(patches).prepend(setIfMissing([]))
onChange(patchEvent)

This ensures you're initializing the array if it doesn't exist before trying to insert items into it.

Some additional info that might be useful. I know the event fires because I can log out field. I get no error in Sanity dashboard or the console.

Also, the handler is attached to an imported Sanity dropdown button,

<Button
  kind="simple"
  items={type.of}
  onAction={(field) => handleAction(field)}
  inverted={true}
>
  Add
</Button>

So I figured out why nothing was happening and that because I forgot to wrap the

PatchEvent

in the

onChange

method — 🤦‍♀️. So now I do get an error. My updated PatchEvent looks like this,

onChange(PatchEvent.from(insert({items: [{ _type: field.name, path: [-1] }]})).prepend(setIfMissing([])))

and the new error is,

Cannot read property 'length' of undefined

I’ve made some progress on this. I think I have the patch right (maybe), currently my handler looks like this;

const handleAction = (field) => {
    const patches = insert(
      [{ _type: field.name }],
      'after'
    )
    const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([]))
  
    onChange(patchFrom)
}

My error now is

Attempt to apply insert patch to non-array value

and if I log the

typeof value

it does return

object

Hallelujah, I’ve got this working… for a bit anyways. For anyone who is interested this is what my final handler looks like;

const handleAction = (field) => {
    const patches = insert(
      [{ _type: field.name }],
      'after',
      [-1]
    )
    const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([]))
  
    onChange(patchFrom)
  }

The item param will need some work, like a

_key

etc but otherwise this is now inserting an item on to the end of

value

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo

Issue with inserting an item into an array in a custom input component.

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?