Feature Request: Make multi-select a HOC like Creatable rather than prop on Select?

[dakur]

Thanks for maintaining react-select!

Currently, there is a problem with simple distinction between single and multi selects. I was wondering a lot why ValueType contains null type rather then just leaving an empty array when I was working on multiselect components. Then, from some issue I've understood that it is because of single selects which can be nullable.

But because of this I have to write [...(existingOptions === null ? [] : existingOptions), newOption] in every onChange listener. It causes also weird bugs like #3632.

I think that multi select functionality should be rather implemented as a higher-order component like Creatable rather than part of Select itself.

[dakur]

It's actually worse when working in Typescript – you have no option than silence the error when trying to update options programatically because of wrong typings:

[ebonow]

Greetings @dakur and sorry there hasn't been a reply on this.

Regarding your first use-case, it was discussed internally that the null vs [] was a bit confusing so this was changed in v4 such that empty-case of isMulti select is [] otherwise it is null. Hopefully this makes it a bit cleaner on your end to implement.

As for creating a wrapper, this is not nearly as simple as the other wrappers since isMulti impacts so much of the internal functionality. To exemplify this, a quick search shows that it appears 37 times in Select.js and this does not even address all the sub components that rely on selectProps.isMulti so it would require almost an entire rewrite of the library.

Regarding the conversation in #4247 , I think we can safely close this issue, but willing to hear your thoughts on this.

[Methuselah96]

Indeed, #4339 should resolve this issue. The TypeScript types have also been updated to have different types for onChange depending on whether it is a multi or single select.

[dakur]

Hi guys, thanks for answering and for your work. I'll try to upgrade to latest version soon and see what it looks like now. I did not see the code for a while so I can not say right now.

[ebonow]

I will mark as resolved, but if you discover that this is still an issue, please feel free to reply whenever you have the time to review, and we can re-evaluate and re-open if necessary at that point.

[dakur]

Ok, however you need. 🙂

[dakur]

It looks like it works, but I can not say it sure, because I have ton of problems with types after upgrading. So I will rather wait for rewrite to TS which ensures there are correct type definitions and proper documentation of the type system so that I can be sure the problem is on my side. 🙂

[dakur]

Just info

I was forced to get through it because I needed to upgrade React to latest. Well… it works (in browser), but type checks fail quite a lot. I've already made a PR to @types/react-select with my first problem and second one arised with value and defaultValue (not pretty sure yet what is the problem). The thing is that I'm trying to decorate the whole Creatable and have it type-safe – something that I haven't found in @types tests.

Now I've ts-ignored it. Either you will come across it in the rewrite to TS or I will write some failing test in future.