Auto-filling fields in Sanity schemas and the complexity of implementing it.

{
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Title',
    },
    {
      name: 'subtitle',
      title: 'SubTitle (Recommended)',
      type: 'string',
    },
  ]
}

TITLE | SITENAME

TITLE | SITENAME

import React from 'react';
import {FormField} from '@sanity/base/components';
import {TextInput} from '@sanity/ui';
import { useId } from '@reach/auto-id';
import PatchEvent, {set, unset} from '@sanity/form-builder/PatchEvent';
import {withDocument} from 'part:@sanity/form-builder';

const MetaTitleTextField = React.forwardRef((props, ref) => {
  const inputId = useId();

  const handleChange = React.useCallback((event) => {
    const inputValue = event.currentTarget.value;
    props.onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()));
  }, [props.onChange]);

  const customValue = props.value || `${props.document.title} | COMPANY TITLE`;

  return (
    <FormField
      title={props.type.title}
      description={props.type.description}
      __unstable_markers={props.markers}
      __unstable_presence={props.presence}
      compareValue={props.compareValue}
      inputId={inputId}
    >
      <TextInput
        id={inputId}
        onChange={handleChange}
        value={customValue}
        readOnly={props.readOnly}
        placeholder={props.placeholder}
        onFocus={props.onFocus}
        onBlur={props.onBlur}
        ref={ref}
      />
    </FormField>
  );
});

export default withDocument(MetaTitleTextField);