React-select: Value of hidden input element does not change

[mjuopperi]

When typing in or selecting a value the value of the hidden input does not change. This happens with the first example in the tutorial. Due to this the displayed value does not change either.

I tested it with latest Chrome and Firefox on Arch Linux and MacOS.

Here is a recording of the issue:

[RizkiDPrast]

I faced this issue too and it might be because of

The component is now "controlled", which means you have to pass value as a prop and always handle the onChange event. See https://facebook.github.io/react/docs/forms.html#controlled-components

to work around it, we need to pass value from new Component which return <Select />. Something like this works

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

class NewClass extends Component {
    constructor(props) {
      super(props);
      this.state = {}
    }
    render() {
      var options = [
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' }
      ];

      return (
        <Select
            name="form-field-name"
            value={this.state.selected}
            options={options}
            onChange={(selectedValue) => this.setState({selected: selectedValue})}
        />
      )
    }
  }

ReactDOM.render(
  <NewClass />,
  document.getElementById('root')
);

[chalda]

thank you @RizkiDPrast . This should perhaps go into the readme for people using redux/controlled components.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.