Wsrtjtyk

Hi i am using react multi select with negative and positive values.When i select -1
it is automatically changed to 1. So not able to select -1. other values working fine.

 class FlavorForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {value: '1'};



    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }



  handleChange(event) {

    this.setState({value: event.target.value});

  }



  handleSubmit(event) {

    alert('Your favorite flavor is: ' + this.state.value);

    event.preventDefault();

  }



  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          Pick your favorite flavor:

          <select value={this.state.value} onChange={this.handleChange} multiple>

            <option value="-1">Grapefruit</option>

            <option value="0">Lime</option>

            <option value="1">Coconut</option>

            <option value="2">Mango</option>

          </select>

        </label>

        <input type="submit" value="Submit" />

      </form>

    );

  }

}



ReactDOM.render(

  <FlavorForm />,

  document.getElementById('root')

);

Please help how to select -1 with react multi select.

Demo

You need to store the values property in state as an array, i.e.:

this.state = { 

  values: 

}

And then, change handleChange to this:

handleChange(event) {

    let choices = event.target.selectedOptions;

    let final = ;

    for(let i=0; i<choices.length; i++) {

      final.push(choices[i].value);

    }

    this.setState({ value: final });

  }

And it should work.

Here is a link to a working version:
https://codesandbox.io/s/p3705q0zm

Cheers!

Use array for value if multiple is true based on the documentation.
For multiselect behavior use options as described in this post.

class FlavorForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {value: ['1']};



    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }



  handleChange = ({target}) => {

    this.setState(prevState => ({

      value: .filter.call(target.options, o => o.selected).map(o => o.value)

    }));

  }



  handleSubmit(event) {

    alert('Your favorite flavor is: ' + this.state.value);

    event.preventDefault();

  }



  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          Pick your favorite flavor:

          <select value={this.state.value} onChange={this.handleChange} multiple>

            <option value="-1">Grapefruit</option>

            <option value="0">Lime</option>

            <option value="1">Coconut</option>

            <option value="2">Mango</option>

          </select>

        </label>

        <input type="submit" value="Submit" />

      </form>

    );

  }

}



ReactDOM.render(

  <FlavorForm />,

  document.getElementById('root')

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

I noticed that my console was logging the following error

Warning: The value prop supplied to must be an array if multiple is true.

I took the liberty of fixing that and coincidentally the -1 selection started working:

class FlavorForm extends React.Component {

  constructor (props) {

    super(props)

    this.state = { values:  }



    this.handleChange = this.handleChange.bind(this)

    this.handleSubmit = this.handleSubmit.bind(this)

  }



  handleChange (event) {

    const values = this.state.values.includes(event.target.value)

      ? this.state.values

      : this.state.values.concat(event.target.value)

    this.setState({ values: values })

  }



  handleSubmit (event) {

    alert(`Your favorite flavor is: ${this.state.values}`)

    event.preventDefault()

  }



  render () {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          Pick your favorite flavor:

          <select

            value={this.state.values}

            onChange={this.handleChange}

            multiple

          >

            <option value="-1">Grapefruit</option>

            <option value="0">Lime</option>

            <option value="1">Coconut</option>

            <option value="2">Mango</option>

          </select>

        </label>

        <input type="submit" value="Submit" />

      </form>

    )

  }

}

Remove value attribute from select element it is invalid there.

<select onChange={this.handleChange} multiple>...</select>