React-admin: Required ArrayInput doesn't catch removed items in an Edit view

Created on 12 Aug 2019  路  9Comments  路  Source: marmelab/react-admin

What you were expecting:

When editing a record with a required ArrayInput, if I remove all the items in the input, the form should not be validated.

What happened instead:
If I remove all the items, the form is valid and I can submit the form.

Steps to reproduce:

  1. Go to the following sandbox: https://codesandbox.io/s/simple-0l30c
  2. Find a post that have a some backlinks in the MISCELLANEOUS tab
  3. Remove all backlinks
  4. Send (the form is valid, but it shouldn't because backlinks are required)
// PostEdit.js
<ArrayInput source="backlinks" validate={[required()]}>
    <SimpleFormIterator>
        <DateInput source="date" />
        <TextInput source="url" />
    </SimpleFormIterator>
</ArrayInput>

Other information:

Environment

  • React-admin version: 2.x + 3-alpha
  • Last version that did not exhibit the issue (if applicable):
  • React version:
  • Browser:
  • Stack trace (in case of a JS error):
bug

All 9 comments

To me, it is supposed to be validate={[required()]} and not validate={required()}.
With that extra array, the validator works on your CodeSandbox.

Did you see any documentation that shows the contrary?

I did not know that [required()] is an acceptable input. I tested it but the results seem to be the same: I'm still able to remove all of the backlinks and submit the form without errors.

Oh your right, I reproduced it! My bad
Next time, please follow the bug issue template, it helps us a lot.

EDIT: I edited the issue to follow the bug report template. Your bug is confirmed, thanks for reporting it!

I fixed this on v3 already

Ah my bad it was in PR I closed. I will fix it soon

On 3.0.0-alpha.3 using <ArrayInput source="prices" validate={[required()]}> results in TypeError: validateProp is not a function.
Using <ArrayInput source="prices" validate={required()}> marks the ArrayInput as required but without really enforcing it:
Screenshot from 2019-08-25 16-59-45
As you can see the Array is rendered as required with the * but I can still submit an ArrayInput with 0 elements.

On a related note: from the previous screenshot you can see the "name" field is required too but react-admin allows it to be submitted only to return the error Invariant Violation: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.
This is still on 3.0.0-alpha.3, I'm not sure if I should open another bug report.

Fixed by #3601

@fzaninotto I know this has been closed but the problem in my previous comment is still there. Simple explanation: if any field inside an ArrayInput has the required validator but it is left empty the form is still submitted only to land on another page showing the Invariant Violation of my previous post.
Should I open another issue report?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fzaninotto picture fzaninotto  路  79Comments

Kmaschta picture Kmaschta  路  22Comments

ragboyjr picture ragboyjr  路  29Comments

Weakky picture Weakky  路  20Comments

josephktcheung picture josephktcheung  路  22Comments