Remove item and selected option does not work in an asynchronous multi select when it comes with a default value

[GlerystonMatos]

The remove item and remove all items option does not work in an asynchronous multi select when it comes with a default value.

[ebonow]

Works for me?

https://codesandbox.io/s/react-select-async-input-forked-5s635?file=/src/App.js

Do you have some code to share?

[GlerystonMatos]

In my case, instead of defaultValue, I'm using value, because the value comes from a query and not a fixed value and when I use defaultValue the values are not loaded. In your example, just change the property and the problem I'm having will happen. I managed to work around it by changing to defaultValue and creating a state to draw the component only after the query was completed

[ebonow]

value and defaultValue are two different use cases.

defaultValue is generally used for an uncontrolled input meaning that there is no defined or managed value. For example, if the Select exists as part of a form, then its value is automatically passed as part of the form data without any state management needed.

Passing a value props to the Select makes this by definition a controlled input and thusly needs to have its value updated from the onChange method.

const MySelectValueComesFromQuery = ({ query, ...props }) => {
  const [ value, setValue ] = useState(props.query);
  const onChange = val => setValue(val);

  return <AsyncSelect value={value}  onChange={onChange} />
}

I see you were able to resolve this as I was typing this. Glad you were able to get it working!

[ebonow]

Also, as you mentioned, defaultValue will not work at all if the prop changes after the Select first renders.

[GlerystonMatos]

Yes, I managed to solve it, thank you very much for your help.