Keep Semantic-React multiple selection dropdown open when removing an item

Question

I'm trying to keep the multiple selection dropdown available from Semanti-UI-React open when I remove a selected item, but still have it close onBlur. I can set closeOnBlur to false and I get the behavior I want for removing the selected item, but then I have to click the arrow on the dropdown to close it. I tried plugging into the relevant events to see if there was a way I could achieve the desired behavior manually, but oddly enough if closeOnBlur is set to false, I don't even get the onBlur event.

Here is my code:

 console.log('onBlur')}
    onChange={ (e, d) => {
        console.log('onChange');
        const value = d.value as string[];
        const displayValues = value.map(code => {
            const lookupEntry = options.find(i => i.value === code);
            return lookupEntry ? lookupEntry.text : '';
        });
        const displayValue = displayValues.reduce(
            (result, text) => {
                return `${result}, ${text}`;
            }, ''\
        );
        this.props.onSelectionChange(value, displayValue);
    }}
    onClose={() => console.log('onClose')}
/>

Any suggestions on how to achieve my desired behavior, or insight as to why the onBlur even doesn't fire if closeOnBlur is set to false?

user_2774284 · Answer

This component supports manual control over it's open/closed status view an open prop. So simply manage that prop via the state of your custom containing class;

getInitialState() {
    return { open: false };
},

handleClose() {
    this.setState({open: false});
},

handleOpen() {
    this.setState({open: true});
}

render() {
    return ;

Keep Semantic-React multiple selection dropdown open when removing an item

1 Answers