Uniforms: Wrapping a uniforms component with `createContainer` ?

[michalczaplinski]

I have an issue with a SelectField component created with connectField() that is wrapped in createContainer.

In react devtools, I can observe that the model field in the uniforms context is updated with the correct value for my field. In this case it's songId. For example if I peek into the sibling TextField:

However, this value is not propagated down to the model field of the context in my SelectField:

This results in being able to scroll through the values in the dropdown of my SelectField, but not being able to "select" one.

The minimal code example:

// The form

const Form = ({
  handleOnSubmit,
  model,
}) => {
  let formRef;
  return (
          <AutoForm
            schema={formSchema}
            onSubmit={values => handleOnSubmit(values, formRef)}
            ref={(ref) => { formRef = ref; }}
            model={model}
          >
              <TextField
                name="name"
                floatingLabelText="Name"
              />
              <SelectFieldContainer
                name="songId"
                hintText="Related Song"
                valueKey="songId"
                displayField="title"
              />
          </AutoForm>
  );
};

// The container

const SelectFieldContainer = createContainer((props) => {
  let data = [];
  const songsSubscription = Meteor.subscribe('songs.list');
  const loading = !songsSubscription.ready();
  if (!loading) {
    data = Songs.find().fetch().map(song => ({
      songId: song._id,
      title: song.title,
    }));
  }

  return {
    ...props,
    isLoading: loading,
    options: data,
  };
}, SelectField);

export default MusicXMLSelectFieldContainer;

// SelectField

const Select = ({
  options,
  value, // current value
  onChange,
  disabled,
  id,
  name,
  hintText, // display when nothing is selected,
  inputRef,
  multi,
  valueKey,
  ...props
}) => {
  const key = valueKey || '_id';
  return (
      <SelectField
        {...filterDOMProps(props)}
        disabled={disabled}
        id={id}
        name={name}
        onChange={(event) => {
          const newValue = multi ? event : event && event[key];
          onChange(newValue);
        }}
        placeholder={hintText}
        ref={inputRef}
        value={value}
        options={options}
        multi={multi}
        valueKey={key}
      />
  );
};
export default connectField(Select);

I might have made a typo somewhere while pasting, so please tell me if I should clarify anything!

[serkandurusoy]

Your tree is like this

+ form
  + container
     + connect  
       + field  

whereas it should have been

+ form
  + connect
     + container  
       + field  

because afaik the connected component should be a direct descendant of a form or a descendant of a component that's wrapped by connectfield.

[michalczaplinski]

You're the champ, @serkandurusoy 😀