Multiselect prevent collapse after selecting item

I solved this using onFocus and onBlur events

private onBlurEvent = (e: MultiSelectBlurEvent) => {
this.setState(prevState => ({
...prevState,
isOpened: false
}));
}

private onFocusEvent = (e: MultiSelectFocusEvent) => {
this.setState(prevState => ({
...prevState,
isOpened: true
}));
}

render() {
const value = this.state.multiSelectedData;
const selected = value.length;
return (
<MultiSelect
data={this.props.data}
onChange={this.checkGridItem}
value={this.state.multiSelectedData}
textField="localizedName"
dataItemKey="id"
itemRender={this.itemRender}
onFocus={this.onFocusEvent}
onBlur={this.onBlurEvent}
placeholder={this.props.placeholder}
opened={this.state.isOpened}
/>
);
}

Hello, Lukáš,

Thank you for sharing the approach with the community.

Indeed, in the native React version of the components, the approach is using the state variable for most of the modification and changes. If some action has to be prevented, the state either does not have to be changed and all will state the same, or in cases where we change it internally, the previous state value has to be set again.

As we encourage sharing different examples with the community I have added some Telerik points to your account for sharing this with us.

Regards,
Stefan
Progress Telerik