Custom field change bar not showing despite 'changed' prop updating

The key to getting the change bar to work with a custom field component is using the renderDefault prop! When you're creating a custom field component (not just a custom input), you need to leverage renderDefault to handle the actual input rendering, which automatically includes the change bar functionality.

Here's the solution that should work for you:

import { Stack, Text } from '@sanity/ui'

export function TextInputWithCharacterCount(props) {
  const { renderDefault, value } = props
  const length = value?.length || 0

  return (
    <Stack space={2}>
      {renderDefault(props)}
      <Text size={1}>
        Character count: {length}
      </Text>
    </Stack>
  )
}

And in your schema:

defineField({
  name: 'description',
  title: 'Description',
  type: 'text',
  rows: 5,
  components: {
    field: (props) => {
      return <TextInputWithCharacterCount {...props} />
    },
  },
})

The magic here is that renderDefault renders the default field component (including the input, label, description, validation, AND the change bar), so you don't need to manually handle all those props like onChange, elementProps, etc. You're essentially wrapping the default behavior and adding your character count below it.

This approach has several benefits:

• The change bar automatically appears and works correctly
• The change bar only extends to the input field itself, not your custom character count element
• You get all the built-in field functionality (validation, presence, etc.) for free
• Much less code to maintain!

This is actually the recommended pattern for custom field components in Sanity Studio v3 when you want to augment rather than completely replace the default behavior.