React-admin: ArrayInput not working with parse and format functions

[UltimateForm]

What you were expecting:
Behavior described here https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record with ArrayInput

What happened instead:
parse and format functions not called

Steps to reproduce:
ArrayInput with parse and format functions passed as props, as decribed here https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record

[fzaninotto]

Can you provide a CodeSandbox demonstrating the issue?

[fzaninotto]

It seems redux-form's FieldArray, which is user internally by ArrayInput, doesn't support parse and format either. So there is nothing we can do in react-admin to fix that.

https://redux-form.com/8.2.0/docs/api/fieldarray.md/

So the problem is on their side. I suggest you open an issue in their bug tracker.

[scq000]

@UltimateForm Hi, how do you solve this problem?

[UltimateForm]

@scq000 hi, i ended up writing my own thing

[Kmaschta]

@UltimateForm Mind you share your solution here, for future readers? :)

[UltimateForm]

@Kmaschta it's not that i don't wanna share, its just i did it in a hurry and its all bungled up with specific stuff on my project, i will try cleaning it up and sharing it here

[UltimateForm]

@Kmaschta sorry i've just remembered better the whole thing, so i wanted to use the parse and format because i wanted my user to choose which fields on a record he'd populate, we're talking object to array format here, transforming an object structure to an array of keys of that object with dynamic field types for each key. I ended up writing a "DynamicObjectEditor", which is not exactly an array input, It assumes from the getgo the source he's editing is an object. So I'm not sure if it'd be a solution for this case?

edit: this will take some time to clean up, i might as well rewrite it now since i was going to anyway, i'll proceed and clean up right now if you guys are still interested

[scq000]

@UltimateForm That will be fine if you give a sample for us to solve the similar issue.

[EricTousignant]

@UltimateForm, any updates on your solution? Thanks.

[UltimateForm]

@EricTousignant again, my "solution" is not a solution for this, it's not an ArrayInput, it's an embedded object editor

you will have more luck using this for example https://www.npmjs.com/package/object-editor-react or at least checking it's code than waiting for me to clean my horrible code on this -which i haven't had the time to do, sorry

[EricTousignant]

@UltimateForm, thanks for your precision :)

[VaguelySerious]

@EricTousignant again, my "solution" is not a solution for this, it's not an ArrayInput, it's an embedded object editor

Can you explain how you built the object editor? I want to make an object editable with a similar interface to ArrayInput by allowing adding/removing key-value pairs.

I managed transformed the object into an array that I then pass to ArrayInput by writing a custom Input, which itself works great, but without the parse function prop I can't transform the modified array back into an object

[UltimateForm]

@VaguelySerious for transformation what I used was a custom sanitizer that that'd process the data everytime react-admin tried to post/put it, and re-process it on gets so that the input fields would be able to read it again as an array, this way the input doesnt need to concern itself with data format transformations (and it shouldnt)

[VaguelySerious]

@UltimateForm Thanks, that should work, though I've been hoping for a better answer. I don't like tying UI / Form logic into the data provider.

[UltimateForm]

I agree. But this part of code I'm referring to is not UI/Form logic, that's why in my case I separated it, I don't know what you're doing or planning to do but in my case at least all this part of code does is transform data types, and this is used for many cases, for example the same code that does this array->dictionary transformation is the same code that does a FileObject->uploaded-file-url transformation, it's not UI/Form logic, it's data format(or type) transformation logic

[UltimateForm]

@VaguelySerious

[RoastVeg]

If you only need the format attribute on ArrayInput, you can extend it like so:

const MyArrayInput = (props) => {
  useEffect(() => {
    //transform your source with some function e.g.
    //props.record[props.source] = transform(props.record[props.source]);
  }, [props.record]);

  return (
    <ArrayInput {...props}>
      //your fields here
    </ArrayInput>
  );
}

[Pierre-Demessence]

I understand that it might not be react-admin fault if we can't use format() and parse(), but I think the doc should at least explain that it doesn't work, otherwise it will only lead to more confusion.

The doc currently says:

<ArrayInput> also accepts the common input props.

_https://marmelab.com/react-admin/Inputs.html#arrayinput_

[fzaninotto]

@Pierre-Demessence You're right, I made a slight modification to the documentation in
46ebc96 to avoid the confusion.