How AI is powering better personalization in e-commerce [with Vercel]. Sign up now

Auto-populate field based on reference selection: "Cannot assign to read only property" error

2 repliesLast updated: Nov 29, 2025

Hello everyone!Hope someone can help me with an issue. I have 2 fields in object. I’d like to choose something from the array of “reference” at the first field. And depends on it make a request and fill the next field automatically. I’m working with it in a custom validation Rule at the first field, but I have an error “`Error validating value: Cannot assign to read only property 'listingElements' of object '#<Object>`’”

It’s appears on line “`doc.parent.listingElements = productRefs;`”
Is it posible to do what I want? Please contact me in case you know what I’m talking about.
AI Update

I understand your issue! You're running into a fundamental limitation with validation rules - validation rules are meant for validating data, not for modifying it. The doc object you receive in a validation rule is read-only, which is why you're getting that error when trying to assign to doc.parent.listingElements.

The good news is that what you're trying to do (populate one field based on another) is absolutely possible in Sanity, but you need to use a custom input component instead of a validation rule.

Here's the approach:

Create a custom input component that:

Here's a basic example structure:

import { set, unset } from 'sanity'
import { useEffect } from 'react'
import { useFormValue } from 'sanity'

export function ListingElementsInput(props) {
  const { onChange, value } = props
  
  // Get the value of the first field (adjust path as needed)
  const referenceField = useFormValue(['yourReferenceFieldName'])
  
  useEffect(() => {
    if (referenceField) {
      // Make your request here
      fetchProductRefs(referenceField).then(productRefs => {
        // Update the field value
        onChange(set(productRefs))
      })
    }
  }, [referenceField])
  
  // Render your field UI (or use renderDefault if you want the standard UI)
  return props.renderDefault(props)
}

Then in your schema:

{
  name: 'listingElements',
  type: 'array', // or whatever type
  components: {
    input: ListingElementsInput
  }
}

The key differences from validation:

Check out this guide on creating custom input components for more details on the implementation.

Why validation rules don't work for this: Validation rules are purely for checking if data is valid - they run after changes and return errors/warnings. They're intentionally read-only to prevent side effects during validation. Custom input components are the proper extension point for conditional field population and dynamic behavior.

Show original thread
2 replies

Was this answer helpful?

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.

Related contributions