Sanity doesn't show a validation warning when using a custom validation and object is not collapsed

[fennadew]

Describe the bug

I have two sets of conditional fields which are required when they are not hidden.

  title: 'Media',
  name: 'media',
  type: 'object',
  fields: [
    {
      name: 'type',
      type: 'string',
      options: {
        list: [
          { title: 'Image', value: 'image' },
          { title: 'Video', value: 'video' },
        ],
      },
      initialValue: 'image',
      validation: Rule => Rule.required(),
    },
    {
      title: 'Video',
      name: 'video',
      type: 'video',
      options: { collapsible: false },
      hidden: ({ parent }) => parent?.type !== 'video',
      validation: Rule =>
        Rule.custom((currentValue, { parent }) => {
          if (parent.type === 'video' && currentValue === undefined)
            return 'This is required'
          return true
        }),
    },
    {
      title: 'Image',
      name: 'image',
      type: 'baseImage',
      hidden: ({ parent }) => parent?.type !== 'image',
      validation: Rule =>
        Rule.custom((currentValue, { parent }) => {
          if (parent.type === 'image' && currentValue === undefined)
            return 'This is required'
          return true
        }),
    },
  ],
}

This is the video object:

  title: 'Video',
  name: 'video',
  type: 'object',
  fields: [
    {
      title: 'File',
      name: 'file',
      type: 'file',
      validation: Rule => Rule.required(),
      options: {
        accept: 'video/*',
      },
    },
    {
      title: 'Poster',
      name: 'poster',
      type: 'image',
      description:
        'The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.',
    },
  ],
}

However, the video field doesn't show the red validation icon when the fields are empty. It only shows the red validation icon if the object is collapsed. This is very confusing for the client because it doesn't give any feedback on why can't publish the document.

Collapsed:

Not collapsed:

Expected behavior

Show the red validation icon when the custom validation is not true and the object is expanded

Which versions of Sanity are you using?

@sanity/cli 2.29.3 (up to date) @sanity/base 2.29.1 (latest: 2.29.3) @sanity/core 2.28.1 (latest: 2.29.3) @sanity/default-layout 2.29.1 (latest: 2.29.3) @sanity/default-login 2.29.1 (latest: 2.29.3) @sanity/desk-tool 2.29.1 (latest: 2.29.4) @sanity/eslint-config-studio 2.0.0 (up to date) @sanity/vision 2.29.1 (latest: 2.29.3)

What operating system are you using?

macOS 12.0 Monterey

Which versions of Node.js / npm are you running?

8.1.2 v16.13.1

[fvieira]

Just ran into this bug, makes the experience of using custom validations on collapsible objects pretty bad, especially if they begin uncollapsed as the validation won't show up and the editor has no idea why he can't publish.

[fvieira]

I just ran into this bug again, and this time it wasn't even a custom validation but a simple required validation, and again it was the cause of much confusion, both for us developers and for the editors. Right now I'm having to make all of these objects collapsible so that editors have a way to see the error, otherwise they have no way of understanding why they can't publish.

Here's a very simple reproduction of the problem, add this field in any document and until you add anything inside the object you won't be able to publish but won't know why.

{
  title: 'Title',
  name: 'title',
  type: 'object',
  validation: Rule => Rule.required(),
  fields: [
    {
      name: 'en',
      title: 'En',
      type: 'string',
    },
    {
      name: 'pt',
      title: 'Pt',
      type: 'string',
    },
  ],
},

Meanwhile, @fennadew, do you think you can update the title of this issue to reflect the fact that the error not showing up on the outside object is not related with the custom validation? In your case if you used a normal Rule.required() I'm almost certain the error on the outside object would still not show up, you'd only get the error on the inner file field (inner validations are only run for Rule.required() validations, not conditional/custom required validations, but I already added an issue to track that at https://github.com/sanity-io/sanity/issues/3644)

[fennadew]

Hey @fvieira, in your case this should do the job:

{
  title: 'Title',
  name: 'title',
  type: 'object',
  fields: [
    {
      name: 'en',
      title: 'En',
      type: 'string',
	 validation: Rule => Rule.required(),
    },
    {
      name: 'pt',
      title: 'Pt',
      type: 'string',
 	 validation: Rule => Rule.required(),
    },
  ],
},

And when you use the object:

{
  title: 'Home',
  name: 'home',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'title',
      type: 'title',
	 validation: Rule => Rule.required(),
    },
  ],
}

[fvieira]

Hi @fennadew, thank you for the suggestion but in that case you added the validations inside, which I don't want to have. The example I gave is a just simplification of an actual object I have, where I don't want validations in the inner fields. It's meant to illustrate the problem that the error in the outer object is not being show.

[kmelve]

Hi!

We are currently working on improving our workflows and follow-up on our open GitHub repository. In that work, we have decided to close most issues older than the release of Sanity Studio v3.

We value your feedback, so if this issue is still important to you and relevant for Sanity Studio v3, please search for relevant open issues. If you can’t find any, open a new one and link to relevant comments in this thread. For questions about how to do something, please post them in the slack community.