React-toolbox: Tags not displayed in Autocomplete when used with redux-form

[thomasthiebaud]

I'm trying to use the Autocomplete component with redux-form.

state = {
  inputSignals: [],
}

handleInputSignalsChange = (value) => {
  this.setState({inputSignals: value});
};

<Field
  name='inputSignals'
  direction='down' 
  label='Input signals'
  onChange={this.handleInputSignalsChange}
  source={
    this.props.typeDetail.signals.reduce(function (state, signal) {
      state[signal.id] = signal.name
      return state
    }, {})
  }
  value={this.state.inputSignals}
  component={Auto}
/>

with the following Auto component

export const AutoComplete = ({ input, meta: { touched, error }, ...custom }) => (
  <Autocomplete
    error={touched && error}
    {...input}
    {...custom}
  />
)

When I select the value from the autocomplete, I do not see the tag (and I can reselect the same value indefinitely). The component is working well if I'm not using redux-form. Also the component is working well with redux-form if I disable multiline

I understand that it is more an integration problem with redux-form than a bug, but I would like to know what can cause the tags to not appear.

[thomasthiebaud]

I solved it by moving the state and handleChange functions into my Auto component

[aislanmaia]

Hey @thomasthiebaud, can you put here your code for this integration? I'm trying right now to use redux-form + autocomplete component, but no success until this moment. When using without redux-form, all the things is working fine.

[thomasthiebaud]

Sure @aislanmaia . I created a component called AutoComplete (different from Autocomplete from react-toolbox, notice that my component has an extra Capital letter)

class AutoComplete extends React.Component {
  state = {
    simple: '',
    multiple: []
  };

  handleMultipleChange = (value) => {
    this.setState({ multiple: value }, () => {
      this.props.onChangeAction(this.state.multiple)
      this.props.input.onChange(value)
    })
  };

  handleSimpleChange = (value) => {
    this.setState({ simple: value }, () => {
      this.props.onChangeAction(this.state.simple)
      this.props.input.onChange(value)
    })
  };

  render () {
    return (
      <Autocomplete
        label={this.props.label}
        source={this.props.source}
        value={this.props.multiple ? this.state.multiple : this.state.simple}
        onChange={this.props.multiple ? this.handleMultipleChange : this.handleSimpleChange}
      />
    )
  }
}

And then I wrap this component in a new component called AutoCompleteField

export class AutoCompleteField extends React.Component {
  state = {
    value: ''
  }

  render () {
    return (
      <Field
        {...this.props}
        value={this.state.value}
        onChangeAction={value => {
          this.setState({ value })
        }}
        component={AutoComplete}
      />
    )
  }
}

And I'm using it like this

<AutoCompleteField
  name='inputSignals'
  direction='down'
  label='Input signals'
  multiple
  source={...} />

[aislanmaia]

Much appreciated, @thomasthiebaud . Big thanks!!! I'm going to test out something like this.