forumone / nextjs-project

Next.js project template
0 stars 0 forks source link

Fix typing on StyledSelect #48

Closed kmonahan closed 10 months ago

mdrayer commented 11 months ago

Hmm, I think the typing of the options prop/generic could use some help. I was able to use something like

<StyledSelect options={['foo', 'bar']} />

without any type errors in the IDE, but then on the app side:

Unhandled Runtime Error
TypeError: Cannot use 'in' operator to search for 'options' in foo

I think using Option extends DropdownOption instead of Option = DropdownOption in the StyledSelect generics should resolve this. Thoughts?

EDIT: We'd also need this change in the StyledDropdownIndicator generics.

kmonahan commented 11 months ago

Diving back into this and going through React Select's types. The docs imply that the Option generic should extend type OptionType = { [string]: any }, but if I do Option extends OptionType = DropdownOption, I do get the type-checker in my IDE preventing me from setting my options to ['foo', 'bar'], but I can do [{ value: 'foo' }, { value: 'bar' }], in which case all the options show up as blank. So I think you're right -- DropdownOption isn't just the default type for StyledSelect, it's also the minimum type. You need value and label for every option, and we should extend DropdownOption.

kmonahan commented 11 months ago

Updated! Let's see if this works better

mdrayer commented 10 months ago

Looks good!