validation running unexpectedly/differently after RHF minor version update

[RwwL]

I decided to try this in discussions before going to the Issues forum, because it's tricky to pin down/describe the actual issue.

I've got a list of links managed by useFieldArray, each one is an object with text and url fields. They can be reordered using react-beautiful-dnd. This has worked without issue for a long time, but after I updated react-hook-form from 7.27.1 to 7.39.1, I started getting an error in the validation... but I'm only seeing that after reordering links with drag-and-drop.

I've been using yup for validation schemas; and both yup and @hookform/resolvers are already up to date, and I double-checked — no issues after upgrading those, only after the RHF update.

Here are my validation rules:

const getValidationRules = (t: TFunction) =>
  object().shape({
    links: array().of(
      object().shape({
        url: string().url(t('createOrEdit.invalidUrlError')),
        text: string().when('url', {
          is: (url: string) => url.length > 0,
          then: string().required(t('createOrEdit.noTextWithUrlError')),
        }),
        linkId: number(),
      })
    ),
  });

After a drop event, I get TypeError: Cannot read properties of undefined (reading 'length') — that's on this line in the snippet above:

is: (url: string) => url.length > 0,

It looks like I could work around that with optional chaining (is: (url: string) => url?.length > 0,) but that feels wrong — if url is undefined, this validator should not be running at all, seems to me. And anyway, if I do add that optional chaining, those errors stop but any edits you've made to the link or text before you move it to another spot in the order get overwritten with the original values — and that wasn't the case before this RHF update.

I did some logging — prior to the RHF update, I never see undefined passed into that validator where the error occurs, it's always a string (possibly the empty string), at any point (typing in the field or after a drop event, which invokes move from useFieldArray).

But after the RHF update, I do see undefined coming into that validator after a drop, even if the URL field is filled for all four of the links that this list lets you edit. Real weird.

So, I know react-beautiful-dnd is in play here too, but I've isolated this specific issue to occur only after updating RHF's minor version, so I thought I'd see if this catches the attention of anyone here and could be related to some known issue.

[RwwL]

I got a chance to look deeper into this and discovered that version v7.29.0 works for us, and v7.30.0+ breaks. I'll start looking more specifically into the commits in the 7.30.0 release.

[bluebill1049]

could you please share a simple codesandbox for the issue as well?

[RwwL]

Well, took me a while to try this with other stuff on my plate, but I wound up with this:

https://codesandbox.io/s/rhf-issue-attempt-repro-ky2hdm

And interestingly I couldn't reproduce the issue from the title, but I did find that with or without that optional chaining I still see the other issue I mentioned:

any edits you've made to the link or text before you move it to another spot in the order get overwritten with the original values

And again, RHF 7.29.0 works fine, but 7.30+ shows the issue.

[bluebill1049]

could be related to this #9365 i am looking into it.

[RwwL]

Hey, it looks like removing the brackets from the name fields I ultimately pass to the controller gets this working:

https://codesandbox.io/s/rhf-issue-attempt-repro-fix-experiments-3mo4h8?file=/src/DraggableLink.tsx:773-967

That is, links[${index}].url breaks and links.${index}.url works.

I decided to try this after spotting this comment & response while going through the specific commits that went into v7.30.0:

Field names using square brackets, ie "test[0]", were removed from tests and are not supported at all now. Have they been deprecated?

yes, no longer supported.

Am I reading that wrong, or does that mean 7.30.0 contained breaking changes?

[bluebill1049]

thanks for the update, not a breaking change, we do not support bracket syntax from v7.

[bluebill1049]

https://react-hook-form.com/api/useform/register

[RwwL]

I'm marking this as the answer, then, thanks again for having a look.

[bluebill1049]

no worries @RwwL thanks for looking around for this issue as well. hopefully not bring you too much hassle to refactor those names.