AsyncCreatable not working- Newly created value not getting set

Hi @bvaughn ,

I’m using the AsyncCreatable component and facing an issue where the newly created value is not getting applied. Here’s the code:

import React, { Component } from "react";
import { autobind } from "core-decorators";
import axios from "axios";
import { AsyncCreatable } from "react-select";


@autobind
class SampleComponent extends Component {
       constructor(){
           super();
           this.state={ usaStates: {} }
       }
	onChange(itemId, selectedItem) {
		this.setState({
			[itemId]: selectedItem || {}
		});
	}
	loadStateData(input, callback) {
		axios("/data/states.json").then((response) => {
			callback(null, { options: response.data, complete: true });
		});

	}
	render() {
		return <AsyncCreatable id="usaStates" value={this.state["usaStates"].value} loadOptions={this.loadStateData} onChange={this.onChange.bind(this, "usaStates")}></AsyncCreatable>;
	}
}

export default SampleComponent;

Is there a fix/workaround for this? Any input appreciated. Thanks!

[desigens]

Here is an example of the issue: https://codesandbox.io/s/43ym8zxzk7

You can download code to local disk.

[ebonow]

As @elie222 stated, the onCreateOption does not call onChange as per the documentation.

I will be closing this issue now, but if there are any other questions or concerns, feel free to create a new ticket or discussion to address these.