Add: value property

[lexich]

It's necessary when we value was changed from external.

<Select2 value={ .... } />

[rkit]

I am getting error:

Warning: Failed form propType: You provided a `value` prop to a form field without an `onChange`  
handler. This will render a read-only field. If the field should be mutable use `defaultValue`.   
Otherwise,   set either `onChange` or `readOnly`. Check the render method of `Select2`.

This solution is not suitable?

this.refs.tags.el.val('value').trigger('change');

[lexich]

You solution, unfortunately does't work (I had errors after uglify code and also receve internal select2 error). But after this patch - all right. And I'll try to fix warning

[lexich]

Problem with React warning was here, because select receive property value, but we not need it

[lexich]

I think feature is ready. What is your opinion? @rkit

[rkit]

Sorry for the long answer… Now I am checking this feature.

[rkit]

1. In this code the defaultValue does not work
2. Please fix code style (see .eslintrc) in Tags.js and Select2.js

[lexich]

@rkit fix code style and bug with code

[rkit]

Thanks! Tomorrow will be release.

[lexich]

👍

[rkit]

It seems there is a small discrepancy in logic:

if multiple as true, and set properties defaultValue and value, defaultValue not replaced on value.
But if multiple as false, defaultValue replaced on value

[lexich]

multiple: true and defaultValue isn't compatible options.

multiple as false, defaultValue not replaced on value => it's only default init by value. It may be replace with setValue in componentDidMount.

Anyway, defaultValue it's very strange prop.

[rkit]

1. multiple: true and defaultValue isn't compatible options

   Maybe so?

   componentDidMount() {
    … 
    const { value } = this.props;
    if (value !== undefined) {
      this.setValue(value);
    }
   …

2. And what for is this needed?

   // in render()
   if ((value !== (void 0) && value !== null)) {
     if (!params.multiple) {
       params.defaultValue = value;
     }
   }

[lexich]

@rkit You are right, my solution was overcomplicated. I fix it

[rkit]

@lexich You still in process?

I still not sure about this:

if (!defaultValue && value !== (void 0)) {
  this.setValue(value);
}

if defaultValue would be 0, the value will be taken from value, otherwise from defaultValue.

[lexich]

@rkit Fix: setValue if only defaultValue isn't defined

[rkit]

Thanks!

[rkit]

@lexich I found a few problems with shallowEqual:

1. this.el.val() — always returning string or string[], accordingly if pass values as in numerics, the shallowEqual will return false
2. Also this.el.val() may return the values in the array in a different order, e.g. http://jmp.sh/pzIqGGI

[lexich]

i wrote custom implementation for our case #19

[rkit]

This is a good solution, thanks.
But I still do not understand, in your case really need to use shallowEqual ?
Because, the component will be updated anyway… What will be the real benefit?

[lexich]

export default class Tags extends Component {
  constructor(props) {
    super(props);
    this.state = { value1: ['feature'] };
  }
  render() {
    const { value } = this.state;
    return (
        <Select2
          data={['bug', 'feature', 'documents', 'discussion']}
          value={ value1 }
          onChange={(e)=> {
            this.setState({ value1: $(e.target).val() });
          }}
        />
    );
  }
}

We have value1 === "feature". componentDidMount hook invoke setValue. setValue triggered onChange hook. Our implementation (I think it's the most common implementation) call setState of value1.
($(e.target).val() is ["feature"]) !== (value1 is ["feature"]). componentWillReceiveProps hook invoke setValue once again. We have infinite loop.

Also shallowEqual need for #18