Cannot detect field values when used within EmbeddedArrayInput

[bfintal]

When paired with https://github.com/MhdSyrwan/aor-embedded-array, the field values are always undefined:

Data:

{
    some_array: [
        {
            type: 'other',
            name: 'Some Name'
        }
    ]
}

Component:

const doResolve = (value) => {
    console.log(value);
    return true;
}

...

<EmbeddedArrayInput label="" source="some_array">
    <TextInput label="Type" source="type"/>
    <DependentInput dependsOn="type" resolve={doResolve}>
        <TextInput label="Name" source="name"/>
    </DependentInput>
</EmbeddedArrayInput>

Even if I use value or resolve, the value cannot be detected.

To be honest I'm unsure whether the problem is with the DependentInput or EmbeddedArrayInput

[mjanos10]

👍 I would also love if these two plugins could work together :)

[djhi]

Please provide us a small repository reproducing the problem

[vedmalex]

Guys! the same problem! Do anyone solve it?

[jamesjwarren]

This is because https://github.com/MhdSyrwan/aor-embedded-array only prefixes the source property with the array element, it isn't aware of the dependsOn property of DependentInputComponent.

I was able to work around this issue with a wrapper component for DependentInput that maps the source property to dependsOn:

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { DependentInputComponent, mapStateToProps } from 'aor-dependent-input/lib/DependentInput';


DependentInputComponent.propTypes = {
  children: PropTypes.node.isRequired,
  show: PropTypes.bool.isRequired,
  source: PropTypes.any,
  value: PropTypes.any,
  resolve: PropTypes.func,
  formName: PropTypes.string,
};

const mapStateToPropsOverride = (state, { resolve, source, value, formName }) => {
  return mapStateToProps(state, {
    // map source prop => dependsOn
    dependsOn: source,
    resolve, value, formName
  });
};

export default connect(mapStateToPropsOverride)(DependentInputComponent);

Perhaps this component should use source instead of dependsOn to be consistent with the field components and thus ease compatibility?

---

Update: The above doesn't totally solve the issue. It fixes the show/hiding of the fields but child fields are not correctly prefixed by EmbeddedArrayInput. I guess as they are now children of the DependantInput component.

This issue can be worked around by creating a custom DependentInputComponent that utilises the EmbeddedArrayInputFormField (aor-embedded-array/lib/mui/form/EmbeddedArrayInputFormField) in place of FormField; with the addition of the prefix property. The prefix value can be extrapolated from source. This is not ideal but I doubt there will be a nice solution without a custom component.

[stephanembl]

@jamesjwarren thanks for this! Do you have a snippet available for your 'update' point? That'd be awesome. Thanks.

[jamesjwarren]

@stephanemombuleau sure here is my version of the component with these modifications https://gist.github.com/jamesjwarren/b0facf05e8a0ce5e5daa987164e571b0

[stephanembl]

@jamesjwarren Great, thanks :)