Numeric Values with Multi-Select option not working

Unable to get multi select working with options that have integers as values. This would be particularly useful if trying to collect a list of Ids.

1. Visit http://jedwatson.github.io/react-select/ down to Numeric Values

2. Check Multi-Select from the checkboxes

3. Select an option from the drop down

You will then see that the select component does not populate

[paulirwin]

The example @pelhage references seems to not be working because of the simpleValue attribute being added. In that example, it is not simple values that are being passed in, but rather an array of objects with numeric value properties.

I confirmed that with 1.0.0-rc2 multi-select does work with numeric property values, as long as you do not use the simpleValue option.

It does not seem like passing an array of numbers (rather than an array of objects with number values) works with the simpleValue option, so I think that option is broken. You can work around this by mapping the array of numbers to an array of objects with myArray.map(i => { return { label: i, value: i }; })

Example that works with objects with numeric values (this was scaffolded from create-react-app):

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import "react-select/dist/react-select.css";
import Select from "react-select";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        { label: "Foo", value: 1},
        { label: "Bar", value: 2},
        { label: "Baz", value: 3},
        { label: "Fuz", value: 4},
      ],
      selectedValues: []
    }
  }

  onChange(values) {
    this.setState({
      selectedValues: values
    });
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <form>
          <div style={{ width: 300, margin: "1em"}}>
            <Select multi options={this.state.products} onChange={this.onChange.bind(this)} value={this.state.selectedValues} />
          </div>
          <ul style={{ width: 300 }}>
            {this.state.selectedValues.map(i => <li>{i.value}</li>)}
          </ul>
        </form>
      </div>
    );
  }
}

export default App;

Update: here is an example with using an array of numbers instead of an array of objects, using map:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import "react-select/dist/react-select.css";
import Select from "react-select";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productIds: [1, 2, 3, 4],
      selectedValues: []
    }
  }

  onChange(values) {
    this.setState({
      selectedValues: values
    });
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <form>
          <div style={{ width: 300, margin: "1em"}}>
            <Select multi options={this.state.productIds.map(i => { return { label: i, value: i }; })} onChange={this.onChange.bind(this)} value={this.state.selectedValues} />
          </div>
          <ul style={{ width: 300 }}>
            {this.state.selectedValues.map(i => <li>{i.value}</li>)}
          </ul>
        </form>
      </div>
    );
  }
}

export default App;

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we’re cleaning up and closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren’t using the latest version of react-select please consider upgrading to see if it resolves any issues you’re having.

However, if you feel this issue 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!