Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix SimpleFormIterator for non empty array inputs #4535

Merged
merged 2 commits into from
Mar 16, 2020

Conversation

NikitaVlaznev
Copy link
Contributor

@NikitaVlaznev NikitaVlaznev commented Mar 15, 2020

Issue

A warning

Each child in a list should have a unique "key" prop

inside CssTransition shows if a record with none empty array input was loaded, and the animation of adding a new element is broken.

How to reproduce

It can be reproduced using any resource with ArrayInput and SimpleFormIterator:

  1. Open Edit for some record
  2. Add few items to an array input
  3. Save
  4. Open Edit for that record again and see a warning
  5. Add few more elements to the array input and see broken animation

For example you can add this input to the CategoryEdit form in the demo app:

import { ArrayInput, SimpleFormIterator } from 'react-admin';
...

<ArrayInput label="Test array" source="test">
    <SimpleFormIterator>
        <NumberInput
            source="weight"
            label="Weight"
            defaultValue={1}
        />
    </SimpleFormIterator>
</ArrayInput>

Reason

nextId is a ref, it is an object like {current: value}.
(nextId > 0) will always be false because ({} > 0) is always false.

Fix

Seems like .current is forgotten there.
With this fix there is no warnings and animation works fine.

A warning "Each child in a list should have a unique "key" prop" inside CssTransition is shown if a record with none empty array field is loaded.
And the animation is broken.

nextId is a ref, it is an object like {current: value}.
(nextId > 0) will always be false because ({} > 0) is always false.

Seems like that '.current' was forgotten there.
With this fix there is no warnings and animation works fine.
@NikitaVlaznev NikitaVlaznev changed the title Fix SimpleFormIterator for non empty array fields Fix SimpleFormIterator for non empty array inputs Mar 15, 2020
@djhi djhi added this to the 3.3.2 milestone Mar 16, 2020
@djhi djhi merged commit b52d712 into marmelab:master Mar 16, 2020
@djhi
Copy link
Contributor

djhi commented Mar 16, 2020

Thanks!

@NikitaVlaznev
Copy link
Contributor Author

@djhi, @fzaninotto, it would be great to see a hotfix release, because currently ArrayInputs look like broken. It is critical for those who use them with the current version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants