React-admin: Reset record-form not triggered on Create

[olegweb]

Reset record-form not triggered on Create

Environment

• React-admin version: 2.2.0
• React version: 16.4.2
• Browser: latest Chrome

[djhi]

Can you please add more details to your issue? What reset, when? There is an issue template, please use it. I'll close this issue otherwise

[olegweb]

Sure.

What you were expecting:
After Editing some record if I go to Create state.form.record-form should be cleared.

What happened instead:
It's not cleared.

How to fix:
Add somesing like:
this.props.resetForm(REDUX_FORM_NAME);

[djhi]

Thanks for reporting, I'll check it out

[djhi]

I can't reproduce it on the simple example. Can you setup a codesandbox showing the issue ?

[olegweb]

Open https://vv8o823zzl.codesandbox.io/#/posts (https://codesandbox.io/s/vv8o823zzl)
Click on Edit (for example post 13)
Next click on create or change the url to https://vv8o823zzl.codesandbox.io/#/posts/create
And wooala all fields are filled from post 13

[djhi]

There are some messed up dependencies on your codesandbox. I fixed them on this one: https://codesandbox.io/s/3rl5r7291p and can't reproduce your issue

[olegweb]

Nope it's still here:
Open new window https://3rl5r7291p.codesandbox.io/#/posts/13
Next change the url to https://3rl5r7291p.codesandbox.io/#/posts/create

Tested in Chrome, Firefox
You can check it in Redux Dev tool

[djhi]

Ah I finally reproduced it! Can you confirm it only happens when you navigate directly to the edit page (not from the list to the edit) before going to create?

[djhi]

This is really weird. I can't reproduce it locally on the simple example

[olegweb]

I'm sorry for delay. It doesn't reset on any route change except Edit.
May be there was some reason for keeping it on route change ?

May be related to https://github.com/erikras/redux-form/issues/4160 and https://github.com/erikras/redux-form/issues/4152

[zavadpe]

@djhi I just want to add that when you fill up the create form (posts in the sandbox above) but don't submit it (just go directly to comments list) and then when you open create post form again it "remembers" previously filled data. Is this an expected behaviour? In my project it happens also between non-related forms.

[meepeek]

I ran into the same problem. I my case, I submitted

{name: "something"}

after that, react-admin make a request with the recently created id and then my server return this

{
name: "something"
id: "5b7279d20e589919b35313fe"
created: "2018-08-14T06:42:26.695Z"
modified: "2018-08-14T06:42:26.695Z"
}

the first create was success but as I filled another info, let say,

{name: "anotherThing"}

and submitted again, it failed due to id duplication. When I tap redux to investigate, it was because record-form only clear 'name' value, the previously created info that has returned from the server (id, created, modified) was still there, so instead of sending {name: "anotherThing"} as I expected, this is what it sent to the server on the second submission.

{
name(pin): "anotherThing"
id(pin): "5b7279d20e589919b35313fe"
created(pin): "2018-08-14T06:42:26.695Z"
modified(pin): "2018-08-14T06:42:26.695Z"
}

How to make react-admin submit only the values available in filling form and not the returned items ?

[pybuche]

I have the same exact problem.

When I have let's say two entities A & B:

// Entity A:
fields: id, name, field_a

// Entity B:
fields: id, name, field_b

If I modify entity A, everything goes smooth, but when I want to modify entity B, via the interface (changing menu, clicking on edit or create), I have a "internal server error"

A little investigation shows me that when submitting B form, I have something like:
```
{ id: myId, name: myName, field_a: myA, field_b: myB }
````
Showing that form is not reset correctly. I did not change anything before it happened so I guess this is a lib upgrade bug. I tried to downgrade every lib I had, but nothing does the trick...
Anyone ?

[meepeek]

I have confirmed that this only happen if the form redirection target was 'edit'. If you don't pass any redirect props to the form, it is, by default, redirect to 'edit'. Current workaround is to pass form redirect anywhere (show or create) except edit

const create = ({ classes, ...props }) => (
    <Create {...props}>
      <SimpleForm redirect="show">
        <TextInput source="name" />
      </SimpleForm>
    </Create>
);

This works for me. Still cannot figure out the reason why.

[BrunoGodefroy]

It seems to me that this commit introduced the bug: 05c0ecc

I have solved it for me by downgrading ra-core to 2.1.0 until the bug is fixed. Hope it can help others.

[pybuche]

Yes I think so.
But what seems strange to me is that I tried downgrading react-admin from 2.1.1 to 2.0.0 and the bug was still there...
Is there a way to downgrade a sub dependency such as ra-core when you installed the whole react-admin package ?

[BrunoGodefroy]

Yes you can downgrade ra-core as well by specifying a version in your package.json file. For me "ra-core": "~2.1.0" was enough to remove the bug.

[pybuche]

Hmmf, I tried it and it doesn't seem to work :/

yarn why ra-core
yarn why v1.7.0
[1/4] 🤔  Why do we have the module "ra-core"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "ra-core"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "2.71GB"
info Disk size with unique dependencies: "10.82GB"
info Disk size with transitive dependencies: "25.59GB"
info Number of shared dependencies: 52
=> Found "react-admin#[email protected]"
info This module exists because "react-admin" depends on it.
info Disk size without dependencies: "1.05GB"
info Disk size with unique dependencies: "9.16GB"
info Disk size with transitive dependencies: "23.93GB"
info Number of shared dependencies: 52
=> Found "ra-ui-materialui#[email protected]"
info This module exists because "react-admin#ra-ui-materialui" depends on it.
info Disk size without dependencies: "1.17GB"
info Disk size with unique dependencies: "9.28GB"
info Disk size with transitive dependencies: "24.05GB"
info Number of shared dependencies: 52
✨  Done in 2.17s.

With [email protected] and [email protected] in my package.json

[olegweb]

My temporary fix:

resetForm.js

import {put, takeEvery} from 'redux-saga/effects';
import {destroy} from 'redux-form';

export default function* resetForm() {
    yield takeEvery('RA/RESET_FORM', function* () {
        yield put(destroy('record-form'))
    })
}

customSagas={[resetForm]}

[nik-lampe]

@olegweb unfortunately your fix seems to remove initial values from the form too.

But I'm not sure. I'll have to take a look into it.

@djhi any guess when #2186 will be merged? I'm wondering if it's worth forking, merging it myself and using this until it's released

[nik-lampe]

@olegweb @djhi

When passing initial values over the location state prop they will be removed when the form get's destroyed.
I think also #2186 breaks this.

[djhi]

I'll check for that use case then

[djhi]

Thanks for reminding me about this usecase @nik-lampe. I finally fixed all of them in #2186 ! :feelsgood: