How to manually trigger Sanity validator for custom input component?

I understand your frustration! When you programmatically update a value in a custom input component via a button click, Sanity doesn't automatically re-run validation, which can leave the Publish button disabled even though your content is valid.

Unfortunately, there is no officially documented API to manually trigger validation in Sanity Studio's custom input components. According to the custom input components documentation, your component receives props like onChange, onFocus, and onBlur, but these are designed for updating values and managing focus state—not for explicitly triggering validation.

The validation system in Sanity Studio is primarily triggered by user interactions with form fields, and the internal validation mechanism isn't exposed as a callable method to custom components.

What You Can Try (Undocumented Workarounds)

While these aren't officially documented solutions, developers in the community have found some approaches that sometimes work:

1. Try calling onBlur() after your update

Some developers report that calling onBlur() can sometimes prompt Studio to revalidate as a side effect:

const MyCustomInput = (props) => {
  const { value, onChange, onBlur } = props;

  const handleButtonClick = () => {
    const newValue = /* your transformed value */;
    
    onChange(set(newValue));
    
    // May trigger revalidation as a side effect
    if (onBlur) {
      onBlur();
    }
  };

  return (
    <div>
      {/* your input UI */}
      <button onClick={handleButtonClick}>Transform</button>
    </div>
  );
};

Important caveat: This isn't documented behavior and relies on a side effect. The onBlur prop is simply a focus management callback, not a validation trigger. It may not work consistently across Studio versions or could break in future updates.

2. Ensure you're using proper patch events

Make sure you're correctly using the PatchEvent system as described in the documentation:

import { set, unset } from 'sanity'

onChange(newValue ? set(newValue) : unset())

3. Focus/blur a hidden input element

Some developers add an invisible native input that you can programmatically focus and blur:

const inputRef = useRef(null);

const handleButtonClick = () => {
  const newValue = /* your transformed value */;
  onChange(set(newValue));
  
  // Attempt to trigger validation through focus cycle
  inputRef.current?.focus();
  inputRef.current?.blur();
};

return (
  <div>
    <input 
      ref={inputRef} 
      style={{ opacity: 0, position: 'absolute', pointerEvents: 'none' }} 
      tabIndex={-1}
    />
    {/* your actual UI */}
  </div>
);

Again, this is a workaround that exploits how Studio's validation might be triggered internally—not an official API.

Better Approach: Rethink Your UX

If these workarounds feel fragile (because they are), consider whether you can adjust your component's design:

• Could the button update trigger an actual input change that the user sees?
• Could you use a native input element that the user interacts with directly after the button click?
• Could validation be relaxed or adjusted in your schema to better match the programmatic updates?

Report This Issue

Since this is a common pain point without a documented solution, I'd recommend:

1. Checking the Sanity GitHub discussions to see if others have found better solutions
2. Posting in the Sanity Slack community for real-time help
3. Opening a feature request for an explicit revalidate() API in custom input components

The lack of a documented validation trigger API is a real limitation when building custom inputs with programmatic updates, and the Sanity team would benefit from hearing about your use case.