Field with Array of objects (Unified Mode)

I’m having a field tags which is supposed to be an array of objects. Using react-select with multi I’m able to add tag objects (with an id and a name) to the array (Note that that id and name are not editable, you can just add/remove objects).

Starting with an empty array this works flawlessly, but when initializing the form with an object which has already some tags the field’s value always returns the inital array. I did a little bit of debugging and discovered that when I start with an emtpy array field.hasNestedFields is false while when starting with a pre-populated one it changes to true.

export const fields = [
  //... some other fields...
  {
    name: 'tags',
    label: 'Tags',
    value: []
  }
]

// .....
const form = new EditForm({fields}, {plugins});

//... load some item
form.update(item);

// the field component
class TagInput extends React.Component {
  render() {
    return (		
                <Select.AsyncCreatable
		    {...field.bind()}
		    multi
		    valueKey="id"
		    labelKey="name"
		    resetValue={[]}
		    searchable={true}
		    clearable={true}
		    loadOptions={this.getTags}
		/>
    )
  }
}

[bvallant]

Thanks for your help again, after some poking around I came up with this onChange handler:

handleChange(e) {
  const {field} = this.props
  // clear all "old" values 
  // field.clear() / .reset() didnt work for me 
  // so clearing the mobx array myself
  field.fields.clear()

   // add the currently selected values
   e.map(v => field.add(v));
}

This basically works now for me, thanks for poinint me to the onChange thing.

[foxhound87]

I’ve updated the package introducing the struct prop.

Take a look here: https://github.com/foxhound87/mobx-react-form/blob/master/tests/data/forms/fixes/form.q1.js