How to disable the "Save" button in a custom document action when there are errors in the input fields.

14 replies
Last updated: Oct 1, 2021
Hello, I'm trying to make a custom document action and I don't want the changes in the document to be saved if there are errors in the input fields (the publish button should be off till all errors are fixed by the user). I'm trying to figure it out by referring to this page in the docs https://www.sanity.io/docs/document-actions-api but no luck so far. Any help will be much appreciated.
Oct 1, 2021, 5:39 AM
Hi Amrita. It sounds like Validation should do the trick. 🙂
Oct 1, 2021, 5:43 AM
Thank you for your reply. I have used validation in the input fields which shows the errors correctly. I dont want to “Save” button to be activated when there are errors in the document (pls see attached screenshot)
Oct 1, 2021, 5:48 AM
This is my customSaveAction.js
import { useState, useEffect } from "react";
import { useDocumentOperation } from "@sanity/react-hooks";
export function SetAndSaveAction(props) {
  const { patch, publish } = useDocumentOperation(props.id, props.type);
  const [isPublishing, setIsPublishing] = useState(false);

  useEffect(() => {
    // if the isPublishing state was set to true and the draft has changed
    // to become `null` the document has been published
    if (isPublishing && !props.draft) {
      setIsPublishing(false);
    }
  }, [props.draft]);

  return {
    disabled: publish.disabled,
    label: isPublishing ? "Saving..." : "Save",
    onHandle: () => {
      // This will update the button text
      setIsPublishing(true);

      // Set publishedAt to current date and time
      patch.execute([{ set: { publishedAt: new Date().toISOString() } }]);

      // Perform the publish
      publish.execute();

      props.onComplete();
    },
  };
}
Oct 1, 2021, 5:51 AM
Thanks for that. What does your validation function look like in your schema?
Oct 1, 2021, 5:53 AM
{
            name: "internalLink",
            type: "object",
            title: "Internal Link",
            fields: [
              {
                name: "pageReference",
                type: "reference",
                validation: (Rule) =>
                  Rule.required().warning("Missing Internal Link"),
                to: [{ type: "page" }],
              },
            ],
          },
Oct 1, 2021, 5:54 AM
Thank you for your reply. I have used validation in the input fields which shows the errors correctly. I dont want to “Save” button to be activated when there are errors in the document (pls see attached screenshot)
Oct 1, 2021, 5:48 AM
Interesting. It seems to work (i.e., blocks publishing) when I gave this a try. I’ll try a few additional things tomorrow. In the meantime, what version of the studio are you working on? (Discoverable by running
sanity versions
in your terminal.)
Oct 1, 2021, 6:12 AM
@sanity/cli 2.18.0 (latest: 2.20.0)@sanity/base 2.20.0 (up to date)
@sanity/block-content-to-react 3.0.0 (up to date)
@sanity/client 2.19.0 (up to date)
@sanity/components 2.14.0 (up to date)
@sanity/core 2.20.0 (up to date)
@sanity/dashboard 2.20.0 (up to date)
@sanity/default-layout 2.20.0 (up to date)
@sanity/default-login 2.19.0 (up to date)
@sanity/desk-tool 2.20.0 (up to date)
@sanity/vision 2.20.0 (up to date)
Oct 1, 2021, 6:15 AM
@sanity/cli 2.18.0 (latest: 2.20.0)@sanity/base 2.20.0 (up to date)
@sanity/block-content-to-react 3.0.0 (up to date)
@sanity/client 2.19.0 (up to date)
@sanity/components 2.14.0 (up to date)
@sanity/core 2.20.0 (up to date)
@sanity/dashboard 2.20.0 (up to date)
@sanity/default-layout 2.20.0 (up to date)
@sanity/default-login 2.19.0 (up to date)
@sanity/desk-tool 2.20.0 (up to date)
@sanity/vision 2.20.0 (up to date)
Oct 1, 2021, 6:15 AM
Thanks for your help Geoff!
Oct 1, 2021, 6:16 AM
Thanks for your help Geoff!
Oct 1, 2021, 6:16 AM
Thanks! Sorry I have to leave this for now but if it’s not picked up by a colleague I’ll take another look tomorrow.
Oct 1, 2021, 6:16 AM
No worries. I’ll keep trying in the meanwhile.
Oct 1, 2021, 6:16 AM
I think I fixed it (although it feels like a hack). I checked if the document had any validation markers and if it did then disable the Save button.
import { useState, useEffect } from "react";
import { useDocumentOperation, useValidationStatus } from "@sanity/react-hooks";
export function SetAndSaveAction(props) {
  const { patch, publish } = useDocumentOperation(props.id, props.type);
  const { markers } = useValidationStatus(props.id, props.type);
  const [isPublishing, setIsPublishing] = useState(false);

  useEffect(() => {
    // if the isPublishing state was set to true and the draft has changed
    // to become `null` the document has been published
    if (isPublishing && !props.draft) {
      setIsPublishing(false);
    }
  }, [props.draft]);

  return {
    disabled: markers.length ? true : publish.disabled,
    label: isPublishing ? "Saving..." : "Save",
    onHandle: () => {
      // This will update the button text
      setIsPublishing(true);

      // Set publishedAt to current date and time
      patch.execute([{ set: { publishedAt: new Date().toISOString() } }]);

      // Perform the publish
      publish.execute();

      // Signal that the action is completed
      props.onComplete();
    },
  };
}
Oct 1, 2021, 7:21 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?