React-select: Numeric Values with Multi-Select option not working

[pelhage]

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

[IndifferentDisdain]

+1; this one is hurting me pretty badly at present.

[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;

[amitripshtos]

I'm having same issue and it's quite critical since most of the time i need to send to the form list of IDs - which are numbers

[newswim]

Would this PR resolve the issue?
https://github.com/JedWatson/react-select/pull/1600

[newswim]

It just maps over the values and converts them to Number type.

[steviesama]

I get this too. I'm using the array indices of the data I'm selecting for in the database. But the data shape is different, so I have to generate the options array. I just added + '' to the value assignment to convert it to a string and it works fine. And later just parse it to an int when the record is stuffed in the database.

[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!