makeCreatableSelect(...) not working

[marcesengel]

Hey,

I'm trying to create a creatable select using makeCreatableSelect(...). The default export <CreatableSelect /> component works as expected. However when I switch to using makeCreatableSelect(...), I don't get the option to create a new entry anymore.

Replicated in this CodeSandbox: https://codesandbox.io/s/modest-chandrasekhar-u8yki?file=/src/App.js

Or is it me not properly using makeCreatableSelect(...)?

Best regards

[ebonow]

Greetings @DragonRaider5 ,

makeCreateableSelect is intended to be used only as an internal method to access the entry point (or so it would seem from the TODO comment).

The reason it does not work in the manner you are using it is because this method needs to be wrapped in a manageState wrapper which more specifically is the StateManager as you can see here.

As for why it is designed as such, I would suspect that it makes for better testing separation.

That's all to say that importing CreateableSelect would be a better and more stable approach than trying to recreate the default export than to be using makeCreatableSelect.

If this satisfies your question, please feel free to close this issue.

[marcesengel]

Hey @ebonow ,

I think this is very confusing from an API standpoint, as makeAsyncSelect f.e. can also be used without any issues. In addition makeCreatableSelect is mentioned in the docs, so one would expect it to work.

I am aware that it apparently doesn't work because the StateManager is missing. This is because the makeCreatableSelect HOC depends on the inputValue being a controlled property.
I provided a PR to fix this issue and clean up the code a little.

[dakur]

I've run into this issue as well. My use-case is to make creatable from custom react-select component (basically just extending Select and rewriting one method). That's what makeCreatableSelect() is useful for but now I am unable to do it.

[marcesengel]

Same for me, I have a custom styled Select and would like to use it with makeCreatableSelect.

[andresmatasuarez]

any updates here? My use case is the same as the above ones: have a custom used in lots of places in my codebase and want to reuse it to support creatable options.

[ebonow]

Good news, bad news.

Bad news, makeCreatable is being removed in version 5.

Good news, it's being replaced with a hook called useCreatable as a result of the Herculean effort put in by @Methuselah96 converting react select to TypeScript.
https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/useCreatable.ts

Hoping to get the beta released this week. There is a Version 5 roadmap #4559 outlying the remaining items before the final major version change is deemed ready to be released.

[ebonow]

Version 5 has been released and makeCreatableSelect has been deprecated in favor of useCreatable