Error in console after focus/blur into select field
tonoslav opened this issue · 8 comments
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
@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.
I make few updates for support 16.0 react, will be released later #9
@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
@tonoslav fixed, 3.0.10 is published, could you check it for reproduce
npm i react-select-item@3.0.10-a
@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?
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
@BusinessDuck Oh ok thx but why ?
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