ReduxForm - getting select value from Semantic-UI select input

Question

I am trying to get the value of a dropdown menu using Redux Form from a component in React Semantic-UI. I have successfully received the values from normal text inputs, but not select inputs.

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Button, Header, Icon, Modal, Transition, Form, Input, Select, TextArea, Dropdown } from 'semantic-ui-react';
import '../../index.css';

const status = [
  { key: 'Online', text: 'Online', value: 'Online' },
  { key: 'Offline', text: 'Offline', value: 'Offline' },
];
class NewInfoForm extends Component {

  Status({ input, meta: {touched, error}, ...custom }) {
    console.log({...custom})
    return (
      <Form.Field control={Select} name="Status" label="Status" options={status} placeholder="Status" {...input} {...custom} />
    );
  }

  submit(values, dispatch) {
    console.log(values)
  }
  render() {
    const { handleSubmit } = this.props;
    return (
      <Transition animation="fade">
        <Modal trigger={<a className="cursor-pointer"> <Icon name="add" /> </a>} closeIcon>
          <Header content='New Info'/>
          <Modal.Content>
            <Form onSubmit={handleSubmit(this.submit.bind(this))}>
            <h3 className="ui dividing header">Basic Information</h3>
              <Form.Group>
                <Field name="Status" component={this.Status} />
              </Form.Group>
              <Button type="submit" content='Submit Info' icon='add' labelPosition='right' color="green" />
            </Form>
          </Modal.Content>
          <Modal.Actions>
          </Modal.Actions>
        </Modal>
      </Transition>
    );
  }
}

export default reduxForm({
  form: 'NewInfo'
})(NewInfoForm);

Whenever I submit the form, it always returns as an empty object even though I have chosen one of the dropdown values.

Answer 1

I suspect you may need to do some more manual work to make the Select component understand what it should do with the Redux form props you pass to it ( {...input}). So for example, you might have to do some "translation" between the onChange signature of Select and the one onChange signature of Redux form.

  Status({ input, meta: {touched, error}, ...custom }) {
    const reduxFormOnChange = input.onChange;

    // the signature for this onChange is specific to
    // semantic-ui Select
    const semanticSelectOnChange = (maybe, wrong, order, or, irrelevant) => {
      // here we make the translation
      // so that the Redux form onChange gets
      // called correctly. 
      // (NOTE: this is an example, not actual code suggestion)
      reduxFormOnChange(or, maybe);
    };

    return (
      <Form.Field control={Select} 
        name="Status" label="Status" 
        options={status} placeholder="Status" 
        {...input} {...custom} 
        onChange={ semanticSelectOnChange } 
     />
    );
  }

A similar process may be needed for other properties as well. And you could of course also check with tools like Redux devtools (for Firefox or Chrome) to see if the actions dispatched by Redux form contain the data you would expect.