✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Troubleshooting the change bar in a custom field component for text input in Sanity.io

39 replies
Last updated: Mar 10, 2023
I made a custom field with an input, and everything seems to be working properly except the change bar does not show up. the 'changed' prop is being updated properly. Do I need to do anything specific when making a custom field? I passed the elementProps to the input and the patch is working, but no change bar. 🤷‍♂️
Mar 10, 2023, 3:48 AM
Can you clarify what you mean by change bar?
Mar 10, 2023, 6:55 PM
It's called the "Change indicator" in this diagram
Mar 10, 2023, 6:56 PM
But I believe the core component is named ChangeBar
Mar 10, 2023, 6:56 PM
What does your code look like?
Mar 10, 2023, 6:56 PM
Nothing immediately stands out as wrong. I’ll replicate it in my build and troubleshoot.
Mar 10, 2023, 7:17 PM
Thank you. I probably need to useMemo that tone value, but yeah other than that I don't know. There's not yet any documentation on it.
Mar 10, 2023, 7:19 PM
Can you remind me of what version you’re running right now?
Mar 10, 2023, 7:20 PM
im on latest 3.6
Mar 10, 2023, 7:21 PM
I think the issue may have been in your props destructuring. Can you give this a go?
Mar 10, 2023, 8:17 PM
Oh, and you’ll need to convert it back to TS, because I’ve stubbornly not picked it up yet.
Mar 10, 2023, 8:18 PM
I can't fault you for that. I've spent too much time trying to type this component so that it will stop complaining about 'rows' from my schemaType. Would you happen to know what type 'rows' exists on?
Mar 10, 2023, 8:20 PM
Oh, that’s on a text type. If you’re using a string type, you’ll need to pass it in under the options of the schema, then it’ll be available on props.schematype.options
Mar 10, 2023, 8:24 PM
Your code still doesn't work for me. Did you test it out? I'm using this on a custom field component, too, not an input component.
Mar 10, 2023, 8:26 PM
Ohh I used an input component
Mar 10, 2023, 8:26 PM
Reason being is because when I did this for an input component, the change bar extended down into the space where the character count was
Mar 10, 2023, 8:26 PM
I thought that looked bad, so I'm trying to do a custom field component
Mar 10, 2023, 8:27 PM
Was just about to ask why. That makes sense
Mar 10, 2023, 8:27 PM
and everything else works except the change bar
Mar 10, 2023, 8:27 PM
I can still review the changes from the Review Changes menu, but I'd like to keep the UI consistent in terms of the change bar
Mar 10, 2023, 8:28 PM
If this helps, here is my field definition:
defineField({
      name: 'description',
      title: 'Description',
      type: 'text',
      rows: 5,
      components: {
        field: (props) => {
          return <TextInputWithCharacterCount min={100} max={320} {...props} />;
        },
      },
    }),
Mar 10, 2023, 8:31 PM
I'm trying to correctly type this, but the TS compiler keeps complaining about the rows prop not existing on whatever type I try. Of course, without TS, I can get to the prop no problem and pass it to the textarea, but you know TS and all lol
Mar 10, 2023, 8:32 PM
Okay, I think I got it now. You can actually get away with significantly less code. The text area input functions the same way as the default input, so we can use the
renderDefault
prop to handle that for us. The benefit of this is that it also keeps the change bar limited to the text field.
Mar 10, 2023, 8:38 PM
Shut the front door!
Mar 10, 2023, 8:43 PM
I love being able to remove all that code! Thank you!
Mar 10, 2023, 8:43 PM
You’re welcome!
Mar 10, 2023, 8:44 PM
Hold on a few more tweaks:
Mar 10, 2023, 8:52 PM
I’d accidentally removed the value from props earlier. This also will respect the min and max values you specify on your schema’s
options.min
and
options.max
.
Mar 10, 2023, 8:53 PM
the defineField helper doesn't like options.rows or options.min or options.max
Mar 10, 2023, 8:58 PM
Not a typescript wizard but that makes sense. Those are custom options.
Mar 10, 2023, 8:59 PM
according to the docs, text takes a rows prop directly
Mar 10, 2023, 9:00 PM
it's fine. what you gave me before works with the one modification of getting the value back from the input props
Mar 10, 2023, 9:01 PM
Yeah, but I thought you previously said you weren’t using the text type. I was assuming you needed to pass it under options.
Mar 10, 2023, 9:03 PM
no no, I am using the text type.
Mar 10, 2023, 9:03 PM
I was going to try to modify this custom field component to allow for either one though (string or text)
Mar 10, 2023, 9:04 PM
actually it seems to work with either type already
Mar 10, 2023, 9:25 PM
now that we're just using renderDefault
Mar 10, 2023, 9:25 PM
And having removed all the types of course
Mar 10, 2023, 9:26 PM
Ah, yeah, that’s right. With render default, it’ll only care about the rows on the text type so should just be able to plug it into a string field.
Mar 10, 2023, 9:32 PM
Speaking of the change bar, does the slug field not have one?
Mar 10, 2023, 10:22 PM

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?