Parent array field with option>layout: 'grid' causes display issues for hotstop layout

[joshoconnor]

If you find a security vulnerability, do NOT open an issue. Email [email protected] instead.

Describe the bug

The fields for the referenced products in the example below display incorrectly when the containing array is set to grid.

To Reproduce

// spot.schema.ts

export default defineType({
  name: 'spot',
  type: 'object',
  fieldsets: [
    {
      name: 'position',
      options: { columns: 2 },
    },
  ],
  fields: [
    defineField({
      name: 'product',
      type: 'reference',
      weak: true,
      to: [{ type: 'product' }],
    }),
    defineField({
      name: 'x',
      type: 'number',
      readOnly: true,
      fieldset: 'position',
      initialValue: 50,
      validation: (Rule) => Rule.required().min(0).max(100),
    }),
    defineField({
      name: 'y',
      type: 'number',
      readOnly: true,
      fieldset: 'position',
      initialValue: 50,
      validation: (Rule) => Rule.required().min(0).max(100),
    }),
  ],

  ...

})

// shopTheLookImage.schema.ts

export default defineType({
  name: 'shopTheLookImage',
  title: 'Shop the look image',
  type: 'document',
  icon: MdOutlinePhoto,
  fields: [

   ...

    defineField({
      title: 'Product Spots',
      name: 'productSpots',
      type: 'array',
      of: [{ type: 'spot' }],
      display: {
        layout: 'tags'
      },
      options: {
        // plugin adds support for this option
        imageHotspot: {
          pathRoot: 'parent',
          imagePath: `image`,
        },
      },
    }),
  ],

...

})

// product.schema.ts

export default defineType({
  name: 'product',
  title: 'Product',
  type: 'document',
  fields: [

    ...

defineField({
      title: 'Images',
      name: 'images',
      description: 'Images for the category and product page. For optimal display, use a 2/3 aspect ratio.',
      type: 'array',
      of: [
        defineArrayMember({
          title: 'Image',
          type: 'image',
          options: {
            accept: '.jpg, .jpeg, .png',
          },
          icon: FaImage,
        }),
        defineArrayMember({
          title: 'Shop the look image',
          type: 'shopTheLookImage',
          icon: FaImage,
        }),
      ],
      options: {
        layout: 'grid',
      },
      group: 'media',
      validation: (Rule) => Rule.required().max(20),
    }),

    ...
  ]

    ...

  })

When layout 'grid' is set in the options of the images array field in the product schema it causes the productSpots field on the shopTheLookImage schema to display incorrectly. Changing the layout on the images array to 'tags' does not cause this same issue.

Expected behavior

The display option of the parent field referencing the schema containing the imageHotspot plugin should not affect their layout. It should look like this:

Screenshots
If applicable, add screenshots to help explain your problem.

Which versions of Sanity are you using?
3.19.2

Run sanity versions in the terminal and copy-paste the result here.

What operating system are you using?
mac OS

Which versions of Node.js / npm are you running?
node 18
yarn v2

Run npm -v && node -v in the terminal and copy-paste the result here.

Additional context

Add any other context about the problem here.

Security issue?

Any security issues should be submitted directly to [email protected]. In order to determine whether you are dealing with a security issue, ask yourself these two questions:

• Can I access something that's not mine, or something I shouldn't have access to?
• Can I disable something for other people? If the answer to either of those two questions are "yes", then you're probably dealing with a security issue. Note that even if you answer "no" to both questions, you may still be dealing with a security issue, so if you're unsure, just email us at [[email protected]](mailto:[email protected].