[v2] passing an option with isSelected prop doesn't work

[SilencerWeb]

If I pass an option with prop isSelected: true - it will not be selected.

Code:

import * as React from "react";
import ReactDOM from "react-dom";

import ReactSelect from 'react-select'

function App() {
  const options = [
    {
      label: 'option 1',
      value: 'option 1',
      isSelected: true,
    },
    {
      label: 'option 2',
      value: 'option 2',
      isSelected: true,
    },
    {
      label: 'option 3',
      value: 'option 3',
      isSelected: true,
    },
  ];


  return (
    <div>
      <ReactSelect 
        options={options}
        closeMenuOnSelect={false}
        hideSelectedOptions={false}
        menuIsOpen
        isMulti
        onChange={(data) => console.log(data)}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Sandbox demo

[SilencerWeb]

@JedWatson @gwyneplaine it would be really awesome if u fix this bug in beta-7

[gwyneplaine]

@SilencerWeb thanks for this, but this is not a bug, as we do not support this behaviour out of the box. Whether or not an option is selected is a function of either internal state, or the controlled value prop we provide you.

[SilencerWeb]

@gwyneplaine i see, but could you, please, at least point me how can I do it by myself because I need it so much?

[JedWatson]

@SilencerWeb something like this:

isOptionSelected={(option) => option.isSelected)}

You may already know this so please don't be offended if I'm stating the obvious, but be careful to keep the isSelected property in your options array up to date when onChange is called, and be sure to pass the new options array in when it changes. Otherwise you'll have weird things happen.

If there's a way to write your implementation to use the built-in value comparison and provide an options=[...] array as per the examples, I'd highly recommend that 🙂