Cannot detect field values when used within EmbeddedArrayInput about aor-dependent-input HOT 7 OPEN

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

from aor-dependent-input.

Guys! the same problem! Do anyone solve it?

from aor-dependent-input.

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

from aor-dependent-input.

Please provide us a small repository reproducing the problem

from aor-dependent-input.

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.

from aor-dependent-input.

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

from aor-dependent-input.

@jamesjwarren Great, thanks :)

from aor-dependent-input.