Error in console after focus/blur into select field

[tonoslav]

When I open multi list

When I close

Using it with redux-form
Worked for long time, maybe this have something in common with my upgrade to React 16 and that you are still using 15.6 as dependency

This might help you,
facebook/react#10320

[BusinessDuck]

@tonoslav cant be reproduced with react 16.0, please check the comments facebook/react#10320

From your stack trace it is visible that you have 15 of React package but 16 of ReactDOM. Can you try same versions please?

Are you sure about you use the same versions of react and react-dom ? Because this bug (as i understand from the issue on react github page) related to react.

[BusinessDuck]

I make few updates for support 16.0 react, will be released later #9

[tonoslav]

@BusinessDuck I use the same 16 both but you have react 15.6 as dependency in your package and I think that react-select-item uses that react 15.6 and not mine 16

[BusinessDuck]

@tonoslav fixed, 3.0.10 is published, could you check it for reproduce

npm i react-select-item@3.0.10-a

[tonoslav]

@BusinessDuck WTF is wrong with this version? :)
A lot of functions "work" like this

function(option.value);  //calling

function (option) {         //definition
var value = option.value;
}

so it is trying to get value from value instead of option object so you should call function(option) or defition should be function (value) and there should be no var value = option.value than

for example this

Component.prototype.isSelected = function (_a) {
        var value = _a.value;
        return this.state.value.includes(value);
};

use of this function is

Component.prototype.renderLabel = function () {
        var _this = this;
        var selected = this.getOptionsList().filter(function (option) {
            return _this.isSelected(option.value);
        }).map(function (option) {
            return option.label;
        });
        if (this.props.customLabelsRender) {
            return this.props.customLabelsRender(selected, this.props.label);
        }
        return selected.length > 0 ? selected.join(', ') : this.props.label;
    };

How this even works for you?

[BusinessDuck]

You may see in example config https://github.com/BusinessDuck/react-select-item/blob/master/example/example.tsx#L58

so... then

<SelectItem {...select2Props}>
              {childrens.map((item: any, index) => (
                <option key={index} value={item} disabled={item.disabled}>
                   <span className="option-name"> {item.name}</span>
                   <span className="option-date"> {item.creationTs} </span>
                </option>
                  ),
             )}
</SelectItem>

take a look at options objects array :

const childrens = [
            {value: "red", name: "Red", disabled: true, creationTs: "20.01.2017 - 16:53:24"},
            {value: "orange", name: "Orange", creationTs: "20.02.2017 - 12:33:04"},
            {value: "green", name: "Green", creationTs: "10.01.2017 - 11:13:14"},
            {value: "black", name: "Black", creationTs: "05.01.2017 - 15:23:01"},
            {value: "yellow", name: "Yellow", creationTs: "04.01.2017 - 22:53:34"},
            {value: "purple", name: "Purple", creationTs: "02.01.2017 - 11:25:51"},
            {
                creationTs: "01.01.2017 - 01:22:10",
                name: "Light greenish with a little bit of yellow",
                value: "greenish",
            },
        ];

you should pass the full object as value, i mean the array item.

Magic is in this.getOptionsList() function, it is just getter of virtual options list from child components

[tonoslav]

@BusinessDuck Oh ok thx but why ?

[BusinessDuck]

Sometimes we need to pass extra properties, like creationTs in example and render it. By default it was possible by adding extra props to option component, but option tag have limit count props, only value, title, key and other react option component props and we can't pass creationTs as props, but we need it for render , but if we pass full object as value we can use full object inside of react select item for render label, search, highlight text and other features. This functional is not better solution , it will be rewrited later in next major releases. @tonoslav