Typescript: props.value doesn't reflect isMulti config when passing component through HOC – bug?

[dakur]

Hi,

when I want to pass Creatable through HOC, it resolves props.value inside the HOC to PropsValue which is correct, but it doesn't take isMulti into account.

When I change this line in react-select types.ts and update it also in used places, it doesn't throw errors anymore throws different errors.

// before
export type PropsValue<Option> = MultiValue<Option> | SingleValue<Option>;
// after
export declare type PropsValue<Option, IsMulti extends boolean> = IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;

Still, not sure if this is an error or my bad. Can you please look at it? Or should I rather open an issue? (didn't want to pollute the issue space when not clearly sure it is a bug)

I've prepared a repo:

1. clone
2. yarn start
3. see TS errors

[Methuselah96]

Thanks for the detailed question!

The reason it doesn't take isMulti into account is because it's technically valid to pass an array with a single value into value when isMulti is false. I can't remember whether this was a conscious design choice or just an implementation detail that leaked into the types. I'd be happy to re-investigate that if you want me to.

Can you point me to how you're using the value prop in a way where this is causing a problem?

[dakur]

Thanks for you answer!

I understand the thing about different value type when isMulti is on/off. But as I set IsMulti in type generic to true, I would expect it makes its way to props.value as well – which doesn't happen.

Here is a repo (already linked above) with real-world example: https://github.com/dakur/react-select-playground/blob/props-value-in-hoc/src/hoc/makeOptionIfCommaPressed.tsx#L23
Point of this HOC is that if you type something into the creatable and press comma, the already input text should make itself an option. This is used for e-mail address input:

If I press comma, it transfers into option:

In the repo, I replaced e-mail addresses with nicknames for technical simpleness, but the point is still the same.

Feel free to ask further question if it is not clear and thank you once more!