What is the type for CreatableSelect?

[looeee]

What type should I give the selectMenu ref here? I've tried all the obvious things I can think of like CreatableSelect, Select, StateManagedSelect and a few more.

But I always get the same error: Property 'clearValue' does not exist on type 'CreatableSelect' (or whatever I replace CreatableSelect with).

import CreatableSelect from 'react-select/creatable';

const selectMenu = useRef<any>();

useEffect(() => {
    // Note: selected comes from the store and can be set to null elsewhere so I can't simply rely on the menu to handle it
	if (selected === null && selectMenu.current) selectMenu.current.clearValue();
}, [selected]);

<CreatableSelect
    ref={selectMenu}
/>

I have searched through the docs and code but can't find the answer to this. Apologies if I missed something obvious!

[Methuselah96]

This is the type you're looking for:

import { SelectInstance } from 'react-select';

It is mentioned in the v5 upgrade guide and the accessing internals example, but it should probably be added to the TypeScript guide as well. Feel free to create a PR to add it there if you have time.

Also, thanks for your work in the three.js world. 🙂

[looeee]

Cool, that's the one. Thank you ^_^

This has a weird side effect of breaking the inferred type of the onChange handler though.
Here's with the ref set to <any> type. You can see the onChange param is correctly inferred as selectedOption: { value: string, label: string }:

When I change the ref type to SelectInstance then the inferred type changes to selectOption: unknown:

Then I have to manually create an Option interface:

interface Option {
	value: string;
	label: string;
}

And pass it in:

This is not a big deal but seems a pity when it was automatically inferred before.
Any idea why typing the ref breaks type inference?

Also, thanks for your work in the three.js world. 🙂

Damn you're making me feel famous or something haha 😊

[Methuselah96]

That is unfortunate, but if you want the types to be correct, you'll have to declare the Option type somewhere. The main issue is that ref declaration exists and is typed before it's used and so there's no way for SelectInstance to know what Option type to use. The best fix would be to provide the Option type as the first generic to SelectInstance:

const selectMenu = useRef<SelectInstance<Option>>();

Alternatively if you know that you're never going to access the options in some way on the SelectInstance you could just type the option generic as any. That way you wouldn't have to create an Option type:

const selectMenu = useRef<SelectInstance<any>>();

But obviously this has the potential to be less type-safe.

[looeee]

const selectMenu = useRef<SelectInstance<Option>>();

OK this works nicely, and is clean enough to keep me (and the compiler) happy. Thanks for the help, and thank you for creating this awesome package 😁