Typescript error with Select compoent

[jkiss]

<Select
    onSelectionChange={(keys) => {
        keys.size > 0 && setOutputLang(keys)    // Here will trigger a ts error like below
    }}
>
</Select>

Is it a BUG?

[alphaxek]

Hi @jkiss, can you please share the code snippet to reproduce the issue on my side, thanks

[jkiss]

reproduce on codesandbox

[wingkwong]

@jkiss This is just a typing error. In fact the message already shows what is wrong.

Since keys has the type Selection which is 'all' | Set<Key>, you can't just call .size since this is for Set only. Therefore, in order to get rid of the typing error, you may try the following

const size = typeof keys !== "string" ? keys.size : data.length; // update data.length yourself for your case
if (size > 0) setOutputLang(keys)

[jkiss]

ok, your code works for me, but why keys has a 'all' type value? It only should be Set, right? really confuse about this 😢

[wingkwong]

@jkiss The type Selection is actually defined in @react-types/shared. The reason behind is to cover the select-all event, which could be a checkbox to select all items in the collection or shortcut like cmd + A. If onSelectionChange is set with all, then selectedKeys and defaultSelectedKeys will be set to all programmatically.

[jkiss]

it's a simple way to add a check mark behind every selected item, BUT 'all' just a string, it's NOT selected keys Set, right? It also make selectedKeys state hard to use, users must get all keys like: const allKeys = selectedKeysState === 'all' && [key1, key2, ...] 😕