How to close menu onNewOptionClick?

Question

My Code

<Creatable
   name="productType"=
   options = {this.state.productOptions}
   value = {this.state.productType}
   onNewOptionClick = {this.createProductType}
   onChange = {this.handleProductChange}  
 />

createProductType(option) {
    var options = this.state.productOptions;
    var label = option.label.charAt(0).toUpperCase() + option.label.slice(1);
    options.push({
        label: label,
        value: option.value
    })
    this.setState({
        productOptions: options,
        productType: option.value
    })
}

Before I click new option:

After I click new option:

Desired UI state after clicking new option:

Did not whether to post this as issues on Github as I am not sure of the exact way of using onNewOptionClick.

Answer 1

I was able to solve this by adding a ref

ref={input => this.productSelect = input }

and then calling it so

this.productSelect.select.closeMenu();

This (https://github.com/JedWatson/react-select/issues/1262) provided the final clue which helped me solve this. Thanks.

Answer 2

closeMenu() has been depreciated in v2 of React-Select. It has been replaced by blur() The following worked for me:

// Assign the ref in your Select object
<Select ref={input => this.selectRef = input } ... />

// Later in your code when you are trying to close the menu
this.selectRef.select.blur();