Get help on Discord

Using editModal fullscreen option for array of objects in Sanity

8 replies
Last updated: Dec 17, 2021
Hi all! Has anyone used the editModal option on Object type content? I was excited to see that 
fullscreen
was an option, but I'm not seeing any difference in editing experience when setting it. I have a field on my document type that is an 
array
of custom 
object
types, and would love for the editing experience for each of the objects to go fullscreen.
AI Update

Good news! The editModal option does work with arrays—you just need to place it in the right spot. Based on community discussions, the key is to put the editModal option on the array field itself, not on the object type definition within the array.

The Correct Configuration

Here's how to set it up:

defineField({
  name: 'myArray',
  type: 'array',
  options: {
    editModal: 'fullscreen' // Place it here on the array!
  },
  of: [
    {
      type: 'object',
      name: 'myObject',
      // NOT here on the object
      fields: [
        // your fields
      ]
    }
  ]
})

Available Modal Options

You have three modal types to choose from:

  • editModal: 'fullscreen' - Opens the array item editor in a fullscreen modal
  • editModal: 'dialog' - Opens in a centered dialog modal (default behavior for many object types)
  • editModal: 'popover' - Opens in a smaller popover modal

All three options work correctly when placed on the array field's options property.

Why This Works

When you place editModal on the array itself, you're telling Sanity Studio how to handle the editing interface for items within that specific array. If you try to place it on the object type definition inside the of array, it won't have the desired effect because the array field controls the editing experience for its items.

This is particularly useful when you have complex objects with many fields—the fullscreen modal gives your content editors much more room to work with, making the editing experience significantly better than the inline default.

Give this a try and you should see your array items open in fullscreen mode as expected!

Show original thread
8 replies
Yup
user M
just installed the Sanity CLI and did my 
sanity init
today, running 
2.23.1
!
Thanks! Let me see if I can replicate and I'll report back!
I just realized there is a help channel, I apologize for dropping this in the wrong spot!
No worries, this is a great channel for questions, as well! I'm getting the same behavior as you, so I'm double checking usage with the team.
OK, I got clarity on this! The 
editModal
property is intended to only work with an object inside of the Portable Text Editor. I'm afraid it won't have any effect in an array.
Ahh appreciate it
user M
, that's too bad! I submitted a comment to update the Object docs page with a clarifying note, linking this thread.
Thanks, Frank!
I just had a coworker mention that you can put the 
editModal
option on the array instead of the object to get it to work. Ex:
export default {
  name: 'objectTesting',
  title: 'Object Testing',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'arrayDialog',
      type: 'array',
      options: {
        editModal: 'dialog',
      },
      of: [
        {
          name: 'objectDialog',
          title: 'Object Dialog',
          type: 'object',
          fields: [
            {
              name: 'title',
              title: 'Title',
              type: 'string',
            },
          ],
        },
      ]
    },
    {
      name: 'arrayPopover',
      type: 'array',
      options: {
        editModal: 'popover',
      },
      of: [
        {
          name: 'objectPopover',
          title: 'Object Popover',
          type: 'object',
          fields: [
            {
              name: 'title',
              title: 'Title',
              type: 'string',
            },
          ],
        },
      ]
    },
    {
      name: 'arrayFullscreen',
      type: 'array',
      options: {
        editModal: 'fullscreen',
      },
      of: [
        {
          name: 'objectFullscreen',
          title: 'Object Fullscreen',
          type: 'object',
          fields: [
            {
              name: 'title',
              title: 'Title',
              type: 'string',
            },
          ],
        },
      ]
    }
  ],
}
Either way, it should be clarified!

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 freeExplore the demo

Was this answer helpful?