watch seems to not work when i have two inputs and the help text is wrong it shows 0 characters

[genacatharine]

hi i am trying to add an error if user goes above character limits in text field, it seems as thought the first text field works when i copy and paste too much text into it but the second field does not
` const titleValue = watch('title')
const descriptionValue = watch('description')

<TextField
name='title'
defaultValue=''
label='Title*'
control={control}
css={{}}
help={
errors.title?.type === 'required' || errors.title?.type === 'maxLength'
? errors.title.message
: undefined
}
aria-label='title'
rules={{
required: { value: true, message: 'Required' },
maxLength: {
value: 1024,
message: ${titleValue?.length}/1024 maximum character length exceeded,
},
}}
/>
</ColumnLayout.Column>
<ColumnLayout.Column span={3}>

<Controller
control={control}
name='severity'
render={({ field }) => (
<Select
value={field.value}
onChange={(_, { value }) => field.onChange(value)}
aria-label='severity'
>
{severityOptions}

)}
/>

</ColumnLayout.Column>
</ColumnLayout.Row>
<ColumnLayout.Row>
<ColumnLayout.Column span={12}>
<TextField
css={{}}
defaultValue=''
label='Description*'
multiline
aria-label='description'
name='description'
rules={{
required: { value: true, message: 'Required' },
maxLength: {
value: 4096,
message: ${descriptionValue?.length}/4096 maximum character length exceeded,
},
}}
help={
errors.description?.type === 'required' || errors.description?.type === 'maxLength'
? errors.description.message
: null
}
control={control}
/>

`

Textfield is `export const TextField: React.FC = ({
control,
defaultValue,
help,
label,
multiline,
name,
rowsMin,
rules,
}) => {
const { field, fieldState } = useController({ control, defaultValue, name, rules })

return (
<ControlGroup
error={fieldState.invalid}
label={label || capitalizeFirstLetter(name)}
labelPosition='top'
{...{ help }}
>
<Text error={fieldState.invalid} {...{ ...field, multiline, rowsMin }} />

)
}
`

[bluebill1049]

can you plz reproduce that in a codesandbox?

[Moshyfawn]

Alright, I've reproduced it. It's not a MUI issue. It's watched values lagging behind one render. You can clearly see it if you paste "Title is very long" into the input and then paste it again the second time. The length of the subscribed input value is gonna be equal to the first time you've pasted the "Title is very long" string.

subbed-value-delay.mp4

Here's a CSB. It's a demo with a controlled MUI <TextField />, but I've reproduced it with a native uncontrolled HTML input element.

[bluebill1049]

thanks @Moshyfawn this helps!

[bluebill1049]

it's not watching lag one render behind, validate function will also be updated in the render function. so if you want to have precise count down on the text, the error message needs to be put inside the render instead of the validate function.

[Moshyfawn]

Ah, I think I understand where I went wrong with how to think about. Thank you @bluebill1049!
So, the solution is to do custom validate function like this

rules={{
  validate: (value) => {
    if (value.length >= 10) {
      // this will give you the correct value for your error message
      return `Please, enter a title with less than 10 characters (${value.length}/10)`;
    }
  }
}}

Example CSB

[bluebill1049]

👍 or you can keep the message inside the render function as well, not as convenient.

[Moshyfawn]

👍 or you can keep the message inside the render function as well, not as convenient.

Yeah, I think, with smth like i18n utils, it's easier to write your custom validate function due to things like plurals factories to pass the value right into it.
If you just wanna have a reference in your error message, you can just do

{!!fieldState.error && `custom error with length info ${watchedTitle.length}`

in your render function

[bluebill1049]

agrees 👍

[genacatharine]

thank you! I used your first solution
rules={{ validate: (value) => { if (value.length >= 10) { // this will give you the correct value for your error message return Please, enter a title with less than 10 characters (${value.length}/10); } } }}