Multiselect not working

[reznord]

@JedWatson I am trying to implement a multi-select dropdown in my app using react-select. The problem what I am facing is when I add the multi={true} flag, the values are not being selected from the options in the dropdown list.

It has the same problem in one of your examples on the website, the numeric-values example with multi-select enabled.

I am attaching the code for my dropdown here, please tell me if I am going wrong anywhere:

Dropdown.jsx

 import React, { Component, PropTypes } from 'react';
 import styles from './styles/dropdown.css';
 import config from './styles/config.css';
 import Select from 'react-select';
 import compose from 'lodash.compose';
 import { makeHorizontalComponent, makeVerticalComponent } from './utils';
 import cssModules from 'react-css-modules';

 @cssModules({ ...styles, ...config })
 class Dropdown extends Component {
    static defaultProps = {
        orientation: 'horizontal'
    }
    constructor(props) {
        super(props);
    }

    render() {
        const { onBlur, label, multiple,
                upload, description,
                options, className,
                labelKey, valueKey,
                orientation, popup,
                input: { onChange, value, onBlur: reduxOnBlur, name }
        } = this.props;

        const composedOnBlur = compose(reduxOnBlur, onBlur ? onBlur : f => f);

            <Select multi simpleValue value={value} clearable={false} options={options} labelKey={labelKey} valueKey={valueKey} placeholder="Select the days"onBlur={() => composedOnBlur(value, name)} onChange={ (object) => onChange(object[valueKey] || object.value) } />

and I am using this Dropdown component as follows:

const days = [
    {id: 1, label: 'Sun'},
    {id: 2, label: 'Mon'},
    {id: 3, label: 'Tue'},
    {id: 4, label: 'Wed'},
    {id: 5, label: 'Thu'},
    {id: 6, label: 'Fri'},
    {id: 7, label: 'Sat'},
];

<Field component={Dropdown}
    label="Days"
    popup={true}
        options={days}
        multiple={true}
    valueKey="id"
    labelKey="label"
    name="autoDial.workingDays"
    className="row-popup"
    description="System Management is privilege can allow anyone to alter lorem ispum"
/>

When i try to select a value from the dropdown, it doesn't even get selected.

[reznord]

Still facing the same issue.

[digitalmio]

FYI - had the same problem. Temporarily fixed by downgrading to 0.9.1.

[KevinBrolly]

I am also having this problem on 1.0.0, going back to 0.9.1 fixed it for me as well.

[reznord]

@digitalmio @KevinBrolly it works for me now, It was my mistake earlier. This is the code which I used and it works perfectly fine for me.

@JedWatson sorry for opening this issue. It was my mistake earlier. Closing this issue.

import React, {PropTypes, Component} from 'react';
import Select from 'react-select';

const fruits = [
    { label: 'Banana', value: '1' },
    { label: 'Apple', value: '2' },
    { label: 'Mango', value: '3' },
    { label: 'Goa', value: '4' },
    { label: 'Grapes', value: '5' },
    { label: 'Pine Apple', value: '6' },
];

export default class MultiSelectField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      crazy: false,
      value: [],
    };
    this.handleSelectChange = this.handleSelectChange.bind(this);
  }

  handleSelectChange(value) {
    console.log('You have selected: ', value);
    this.setState({ value });
  }

  static propTypes = {
    label: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.array,
      PropTypes.object,
    ])
  }

  render () {
        return (
            <div className="section">
                <h3 className="section-heading">{this.props.label}</h3>
                <Select multi joinValues value={this.state.value} placeholder="Select your favourite(s)" options={fruits} onChange={this.handleSelectChange} />
            </div>
        );
    }
}

[arackaf]

Ugh - so to sum up, and to hopefully help out whoever shows up here from Google, you need to manually manage the value to the Select component - pass in the array of selected values, and add to it in onChange

[newswim]

Would this PR resolve the issue?
#1600

[JarLowrey]

To summarize even further than @arackaf , the important parts of @reznord 's code block is 1)passing this.state.value as Select's value, and the onChange callback that adds to the state's value array when the user selects it.

[Kapil-Vermani]

react-select (1.0.0) in multi mode is not working in latest version of chrome

[chevonc]

Yeah, I am seeing a similar issue where the multi select menu will not open after selecting the first value. Any thoughts?

[externuz]

Same issue as @chevonc described

[fernandocvlopes]

Maybe it can help someone... I just forgot to import the CSS at the beginning, after that it worked properly:
import 'react-select/dist/react-select.css';

By the way, it is in the docs on "Installation" although it is not in the "multiselect" exemple page.

[k-vikram]

It works for me but if you see docs isMulti - allow the user to select multiple values but I had to use multi={true} to make it work for multiple values, can anybody tell what I am missing here?