prompt text won't disappear after selecting one of the suggested options

Question

I have implemented react-select to allow entering tags based on auto-complete suggestions and/or inserting new ones.

My implementation is as follows:

import Select from 'react-select';
...    
<Select.AsyncCreatable
    className='add-tags'
    clearable={!!selectionTags}
    placeholder={'add more'}
    name="form-field-name"
    value={selectionTags}
    onChange={setSelectionTags}
    loadOptions={loadOptions}
    promptTextCreator={(label)=>`add new tag: ${label}`}
    inputProps={inputProps}
    multi
/>

When selectionTags is the list of tags that have already been selected, setSelectionTags is a function that adds a new selected item to that list, and loadOptions holds the list of autocomplete suggestions.

Problem is that if I type "ta" and I have "tag1" as one of the available completions, then choosing it will empty the list of suggestions but leave the "add new tag: ta" entry displayed.

Any idea why it's not being removed as well?

Thanks!

Answer 1

Following this thread on React-Select github:
https://github.com/JedWatson/react-select/issues/1663

I ended up working round it by adding the following options:

ref={s => (selectRef = s)} // store a reference to the select instance

onChange={tags => {
                selectRef.select.closeMenu(); // close the entire menu
                selectRef.select.setState({
                    isFocused: false,         // remove focus from new tag option
                });
                setSelectionTags(tags);       // call the add tags method with the new set of tags
            }}