React multi select not able to select negative value

Question

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

gazdagergo · Answer 1 · 2018-11-22T18:46:27.507

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>

But I need multiselect only.Anyhow thanks for your effort! – ManirajSS Nov 22 '18 at 08:36 — ManirajSS, Nov 22 '18 at 08:36
I upgraded with multiselect behaviort. – gazdagergo Nov 22 '18 at 18:47 — gazdagergo, Nov 22 '18 at 18:47

score 0 · Answer 2 · answered Nov 21 '18 at 11:54

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>
    )
  }
}

score 0 · Accepted Answer · answered Nov 21 '18 at 12:03

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!

score -1 · Answer 4 · answered Nov 21 '18 at 11:58

-1

Remove value attribute from select element it is invalid there.

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

answered Nov 21 '18 at 11:58

mbarish-me

897
1
14
25

According to this https://stackoverflow.com/questions/21733847/react-jsx-selecting-selected-on-selected-select-option and this https://reactjs.org/docs/forms.html#the-select-tag using `value` attribute on the ` – Esa Lindqvist Nov 21 '18 at 12:03

React multi select not able to select negative value

4 Answers4