ArrayInput breaks when value is null

[mccasey]

I'm not sure this is a bug or if this was intended with 4.x version of react-admin.

What you were expecting: ArrayInputs render when field value is null.

What happened instead: A cannot read properties of null (reading 'map') error is thrown here in react-hook-form: https://github.com/react-hook-form/react-hook-form/blob/v7.27.0/src/useFieldArray.ts#L103. It appears unless a field value is undefined react-hook-form will not default to an empty array. Based on line 101 unless a field value is undefined react-hook-form will not default to an empty array.

Steps to reproduce: Set any field value in the v4 sandbox test data.tsx file intended to be rendered with ArrayInput to null (ie: 'backlinks').

You can see the error here in this sandbox when you navigate to the edit view for post with id 1. https://codesandbox.io/s/boring-benz-5odpst

Environment

• React-admin version: 4.1.0
• React version: 1.17.0
• Browser: Chrome 101.0.4951.64 (Official Build) (x86_64)
• Stack trace (in case of a JS error):

[slax57]

Hi, and thank you for submitting this. This is a limitation of react-hook-form's useFieldArray. Indeed if you take a look at this code sandbox, I have the same problem using their hook directly (and this hook is used internally by react-admin): https://codesandbox.io/s/react-hook-form-get-started-forked-zp80wb?file=/src/index.js

Maybe we could detect this on our side and replace the value with an empty array, but I'm not really sure about the impacts this would have.

Can you tell us more about your use case?

Thanks

[mccasey]

Use case being that some field values are null. This is only an issue with rendering array inputs, all other inputs appear to render fine when a field value is null. Since react-hook-form doesn't like null values for arrays the only work around for this right now is to remove all null values and replace them with undefined when the data is returned from the api.

[slax57]

Okay so actually, this problem seems to have been solved as of react-hook-form v7.29.0 (although I can't find evidence in the changelog). We currently are on version 7.27.0, so maybe a simple version upgrade could fix this (and if not, then the issue may be on our side). Will label this as a bug since we now have a way to fix this.

[slax57]

Fixed by https://github.com/marmelab/react-admin/pull/7768

[julienV]

Hi, i still can see this issue on react admin 4.2.4...

EDIT: workaround for me is to filter out the response in the dataprovider...

[djhi]

Indeed and it seems that it is expected in react-hook-form: https://github.com/react-hook-form/react-hook-form/issues/4826

[slax57]

According to me this should be fixed on react-hook-form's side (the 'map' error actually comes from their code). That's what I tried to argue here https://github.com/react-hook-form/react-hook-form/issues/4826#issuecomment-1208145917 .

I don't see how we could fix this in RA, since we do not know upfront if a given field will be used inside an ArrayInput or not.

Best we could do is mention in the docs that the value cannot be null if it is to be used with an ArrayInput.

[WiXSL]

According to me this should be fixed on react-hook-form's side (the 'map' error actually comes from their code). That's what I tried to argue here react-hook-form/react-hook-form#4826 (comment) .

I don't see how we could fix this in RA, since we do not know upfront if a given field will be used inside an ArrayInput or not.

Best we could do is mention in the docs that the value cannot be null if it is to be used with an ArrayInput.

@slax57 Your proposed change was added here: https://github.com/react-hook-form/react-hook-form/pull/9170 and released in version 7.38 of react-hook-form