Bug in nested ArrayInput with initialValue(s) #6908

DjebbZ · 2021-11-26T14:49:00Z

What you were expecting:
When I open the Edit view of a resource that has nested ArrayInput and use some initialValue(s) both at the form level and the field, the inputs for this part of the data shows the value from the dataProvider.

What happened instead:
Instead, the inputs display the initialValue at the field level, making it easy for editor that modify another part of the record to override the existing data!

Steps to reproduce:

Open the code sandbox https://codesandbox.io/s/reproduce-nested-arrayinput-default-value-bfpnr
Open the Edit view of the post "Accusantium2 qui nihil voluptatum" (its url in the internal browser is https://bfpnr.sse.codesandbox.io/#/posts/1/2)
Look at the "Related Pictures" inputs : they're all empty because the inputs have initialValue set to "" but data.tsx (should be data.ts BTW) has actual data.

Related code:
The sandbox https://codesandbox.io/s/reproduce-nested-arrayinput-default-value-bfpnr has all the code, and I created this pull request to highlight the small set of changes I made to reproduce the bug.

Other information:
It may be related to a similar issue we created related to <BooleanIinput /> in nested ArrayInput, not sure (#6511)

Environment

React-admin version: 3.19.0, 3.19.2
Last version that did not exhibit the issue (if applicable): N/A, we're not sure when the problem manifested itself.
React version: 17
Browser: Chrome, Brave, Firefox
Stack trace (in case of a JS error):

WiXSL · 2021-11-26T14:56:21Z

Could you describe the bug you are trying to fix?

DjebbZ · 2021-11-26T15:10:00Z

Done, I updated the description (I created the PR from CodeSandbox without a description nor a proper title)

DjebbZ · 2021-11-26T16:41:49Z

(Sorry if I created a PR instead of an issue, but the diff directly in GitHub looked like a good idea to me)

DjebbZ · 2021-11-29T09:22:55Z

It may be related to this issue #6900, not sure though.

DjebbZ · 2021-11-29T14:17:05Z

I tracked it down to useInput inside of RA's <TextField />, that return a value of "" (which is the initialValue, not the actual value from the record) and passes it to the ResettableTextField underlying component. It gets this value from useInput, that itself uses useField from react-final-form. Maybe the problem is over there ?

djhi · 2021-11-29T14:55:08Z

Hi @DjebbZ,
Unfortunately, your code formater settings make it very difficult to see what you actually changed. Can you revert the unnecessary changes?

DjebbZ · 2021-11-29T15:02:03Z

examples/simple/src/posts/PostShow.tsx

+            <ArrayField source="pictures">
+              <Datagrid>
+                <ImageField source="url" />
+                <ArrayField source="metas.authors">
+                  <Datagrid>
+                    <TextField source="name" />
+                  </Datagrid>
+                </ArrayField>
+              </Datagrid>
+            </ArrayField>


This is what I added to the simple example (+ updating react-admin in package.json)

DjebbZ · 2021-11-29T15:03:17Z

Hi @DjebbZ, Unfortunately, your code formater settings make it very difficult to see what you actually changed. Can you revert the unnecessary changes?

Replied via a comment in the diff, because it's too tedious to revert just the code styles. No idea why your prettier config wasn't caught by my IDE.

DjebbZ · 2021-11-29T15:04:13Z

examples/simple/src/posts/PostEdit.tsx

+          <ArrayInput source="pictures">
+            <SimpleFormIterator>
+              <TextInput source="url" initialValue="" />
+              <ArrayInput source="metas.authors">
+                <SimpleFormIterator>
+                  <TextInput source="name" initialValue="" />
+                </SimpleFormIterator>
+              </ArrayInput>
+            </SimpleFormIterator>
+          </ArrayInput>


Sorry, I also added this part (this is in fact the most important part of the bug report)

djhi · 2021-11-29T15:07:16Z

Got it, reproduced

DjebbZ · 2021-11-29T15:58:52Z

examples/simple/src/posts/PostEdit.tsx

+  return (
+    <Edit title={<PostTitle />} actions={<EditActions />} {...props}>
+      <TabbedForm
+        initialValues={_.merge({}, { average_note: 0, pictures: [] })}


I forgot to say that I also I added this part : a global object for the initialValues. Since the ArrayInput field prevents us from specifying here the shape of the pictures field, I had to also add initialValue at the field level. This global initialValues may be important for the bug.

djhi · 2021-11-29T16:14:49Z

So, I tried to reproduce it locally both on master and the v3.19.2 tag branch but couldn't. I can only reproduce it on codesandbox

DjebbZ · 2021-11-29T17:10:13Z

Have you looked at my last comment ? (initialValues at the form level). We commented at ~the same time, maybe you missed it when trying to reproduce ?

djhi · 2021-11-29T20:16:03Z

I did and tried in both branches

DjebbZ · 2021-11-30T11:30:12Z

Me neither, I'm trying to figure out what's missing and will update the PR.

DjebbZ · 2021-11-30T14:44:35Z

I managed to reproduce, that's quite a sneaky one.

In CodeSandbox, according to the docs, it will run the dev script so the simple example is run through webpack. You can see it clearly in the Terminal output in CodeSandbox $ ./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development (which corresponds to the dev script in the simple example's package.json).

But when trying to reproduce locally, I use (and I'm you did too) the make run-simple command, which runs the start command of the simple example, that use vite, not webpack.

And in our application, we use create-react-app which uses webpack internally.

If you run the simple example locally with yarn run dev inside examples/simple, you'll see the problem.

DjebbZ · 2021-11-30T14:54:16Z

I also updated the PR code with my local reproduction case, now the diff is very clean and easy to read.

DjebbZ · 2021-11-30T15:05:59Z

Regarding Vite vs Webpack: that might mean that the way Webpack transpiles the code produces the bug, whereas with Vite it doesn't happen. I've also noticed after a quick glance that the vite.config.js does a few things that webpack.config.js doesn't do, i.e. pointing react-admin to the local version, not the one stored in node_modules. Maybe the bug comes from those kind of differences in the build config?

djhi · 2021-11-30T15:06:56Z

Thanks for the details! I'll dig

DjebbZ · 2021-12-02T10:55:11Z

Any news ? Any way I can help investigate the issue ? Any pointer welcome to help you debug this, I don't really know where to start.

djhi · 2021-12-02T11:24:49Z

I can now reproduce it locally on master even with vite if I remove the aliases.

djhi · 2021-12-02T15:57:40Z

Found it! It looks like a regression in final-form. I still have to find the exact source of this issue though.
Workaround for now, install final-form@4.20.2 in your project

DjebbZ · 2021-12-02T17:10:16Z

I can confirm that the workaround works, thanks A LOT!

Are you capable of telling since which version of RA this regression caused the bug? I want to estimate the potential damage in our app.

djhi · 2021-12-03T08:24:59Z

Actually, it shouldn't have worked before. Final-form array fields are dynamic by nature and the documentation clearly state that the initialValue specified on a field overrides the form initial value. We use this form initial value to initialize the form with the current record. I have a fix that will be published in 3.19.3.

Are you capable of telling since which version of RA this regression caused the bug? I want to estimate the potential damage in our app

Nope

DjebbZ · 2021-12-03T11:26:47Z

Thanks for detailed answer.

DjebbZ · 2021-12-07T19:35:22Z

Yes ! So this should be in the next release, hopefully on Friday right ?

…

On Tue, Dec 7, 2021, 16:55 Francois Zaninotto ***@***.***> wrote: Closed #6908 <#6908> via #6932 <#6932>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6908 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAS3XSTESENG33Y3O5RG5TUPYVAJANCNFSM5I22KNEA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

DjebbZ · 2021-12-07T19:35:47Z

Oh didn't see 3.19.4 !

…

On Tue, Dec 7, 2021, 20:35 Khalid Jebbari ***@***.***> wrote: Yes ! So this should be in the next release, hopefully on Friday right ? On Tue, Dec 7, 2021, 16:55 Francois Zaninotto ***@***.***> wrote: > Closed #6908 <#6908> via > #6932 <#6932>. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#6908 (comment)>, or > unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAAS3XSTESENG33Y3O5RG5TUPYVAJANCNFSM5I22KNEA> > . > Triage notifications on the go with GitHub Mobile for iOS > <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> > or Android > <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. > >

DjebbZ changed the title ~~Reproduce bug in nested ArrayInput with initialValue(s)~~ Bug in nested ArrayInput with initialValue(s) Nov 26, 2021

DjebbZ commented Nov 29, 2021

View reviewed changes

djhi added the bug label Nov 29, 2021

DjebbZ commented Nov 29, 2021

View reviewed changes

update to RA 3.19.0

0f0a45b

DjebbZ added 2 commits November 30, 2021 14:19

Bug not reproduced

efce6fb

Bug not reproduced (2) with FormDataConsumer

3159293

Add labels; bug reproduced with dev script, not start.

e4de867

DjebbZ force-pushed the csb-bfpnr branch from 29f2b97 to e4de867 Compare November 30, 2021 14:53

djhi mentioned this pull request Dec 3, 2021

Fix ArrayInput issue with initialValue #6932

Merged

fzaninotto closed this in #6932 Dec 7, 2021

DjebbZ mentioned this pull request Dec 23, 2021

Bug in ArrayInput still not fully solved #7027

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug in nested ArrayInput with initialValue(s) #6908

Bug in nested ArrayInput with initialValue(s) #6908

DjebbZ commented Nov 26, 2021 •

edited

Loading

WiXSL commented Nov 26, 2021

DjebbZ commented Nov 26, 2021 •

edited

Loading

DjebbZ commented Nov 26, 2021

DjebbZ commented Nov 29, 2021

DjebbZ commented Nov 29, 2021

djhi commented Nov 29, 2021

DjebbZ Nov 29, 2021

DjebbZ commented Nov 29, 2021

DjebbZ Nov 29, 2021

djhi commented Nov 29, 2021

DjebbZ Nov 29, 2021

djhi commented Nov 29, 2021

DjebbZ commented Nov 29, 2021

djhi commented Nov 29, 2021

DjebbZ commented Nov 30, 2021

DjebbZ commented Nov 30, 2021 •

edited

Loading

DjebbZ commented Nov 30, 2021

DjebbZ commented Nov 30, 2021

djhi commented Nov 30, 2021

DjebbZ commented Dec 2, 2021

djhi commented Dec 2, 2021 •

edited

Loading

djhi commented Dec 2, 2021

DjebbZ commented Dec 2, 2021

djhi commented Dec 3, 2021

DjebbZ commented Dec 3, 2021

DjebbZ commented Dec 7, 2021 via email

DjebbZ commented Dec 7, 2021 via email

Bug in nested ArrayInput with initialValue(s) #6908

Bug in nested ArrayInput with initialValue(s) #6908

Conversation

DjebbZ commented Nov 26, 2021 • edited Loading

WiXSL commented Nov 26, 2021

DjebbZ commented Nov 26, 2021 • edited Loading

DjebbZ commented Nov 26, 2021

DjebbZ commented Nov 29, 2021

DjebbZ commented Nov 29, 2021

djhi commented Nov 29, 2021

DjebbZ Nov 29, 2021

Choose a reason for hiding this comment

DjebbZ commented Nov 29, 2021

DjebbZ Nov 29, 2021

Choose a reason for hiding this comment

djhi commented Nov 29, 2021

DjebbZ Nov 29, 2021

Choose a reason for hiding this comment

djhi commented Nov 29, 2021

DjebbZ commented Nov 29, 2021

djhi commented Nov 29, 2021

DjebbZ commented Nov 30, 2021

DjebbZ commented Nov 30, 2021 • edited Loading

DjebbZ commented Nov 30, 2021

DjebbZ commented Nov 30, 2021

djhi commented Nov 30, 2021

DjebbZ commented Dec 2, 2021

djhi commented Dec 2, 2021 • edited Loading

djhi commented Dec 2, 2021

DjebbZ commented Dec 2, 2021

djhi commented Dec 3, 2021

DjebbZ commented Dec 3, 2021

DjebbZ commented Dec 7, 2021 via email

DjebbZ commented Dec 7, 2021 via email

DjebbZ commented Nov 26, 2021 •

edited

Loading

DjebbZ commented Nov 26, 2021 •

edited

Loading

DjebbZ commented Nov 30, 2021 •

edited

Loading

djhi commented Dec 2, 2021 •

edited

Loading