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:

<Dropdown
    style={{whiteSpace: 'nowrap', zIndex: 9999}}
    upward={true}
    search={true}
    multiple={true}
    selection={true}
    loading={loading}
    options={options}
    value={this.props.selectedCodes || []}
    closeOnBlur={false}
    onBlur={() => 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?

Answer 1

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 <Dropdown
            open={this.state.open}
            onBlur={this.handleClose}
            onFocus={this.handleOpen}
            ...
            />;