Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The inferred type of the options props in a multiple Select component is incorrect #488

Open
r4ai opened this issue Sep 19, 2024 · 0 comments

Comments

@r4ai
Copy link

r4ai commented Sep 19, 2024

Describe the bug

The inferred type of the options props in a multiple Select component is incorrect. For example, when passing a string[] type value to the options props, it is inferred as string[][].

Because of this, the type of the first argument of onChange props does not match the actual type of the value.

To Reproduce
Steps to reproduce the behavior:

  1. Write the following component in TypeScript:

    import { Select } from "@kobalte/core/select";
    import { createSignal, type Component } from "solid-js";
    
    type Fruit = "apple" | "banana" | "cherry" | "orange" | "strawberry";
    
    const InvalidMultipleSelector: Component = () => {
      const [values, setValues] = createSignal<Fruit[]>(["apple", "banana"]);
    
      return (
        <Select
          multiple
          value={values()}
          onChange={(values) => {
            setValues(values);
            //        ^^^^^^ Following TypeScript error occurs here:
            // No overload matches this call.
            //   The last overload gave the following error.
            //     Argument of type 'Fruit[][]' is not assignable to parameter of type 'Fruit[] | ((prev: Fruit[]) => Fruit[])'.
            //       Type 'Fruit[][]' is not assignable to type 'Fruit[]'.
            //         Type 'Fruit[]' is not assignable to type 'Fruit'. ts(2769)
          }}
          options={["apple", "banana", "cherry", "orange", "strawberry"] as const}
        ></Select>
      );
    };

Expected behavior
A clear and concise description of what you expected to happen.

The type of options should not be inferred as a two-dimensional array.

import { Select } from "@kobalte/core/select";
import { createSignal, type Component } from "solid-js";

type Fruit = "apple" | "banana" | "cherry" | "orange" | "strawberry";

const InvalidMultipleSelect: Component = () => {
    const [values, setValues] = createSignal<Fruit[]>(["apple", "banana"]);

    return (
    <Select
        multiple
        value={values()}
        onChange={(values) => {
        setValues(values);
        //        ^^^^^^ Type of `values` should be `Fruit[]` not `Fruit[][]`
        }}
        options={["apple", "banana", "cherry", "orange", "strawberry"] as const}
    ></Select>
    );
};

Additional context
Add any other context about the problem here.

No type error occurs if the type of option is explicitly specified:

import { Select } from "@kobalte/core/select";
import { createSignal, type Component } from "solid-js";

type Fruit = "apple" | "banana" | "cherry" | "orange" | "strawberry";

const ValidMultipleSelector: Component = () => {
  const [values, setValues] = createSignal<Fruit[]>(["apple", "banana"]);

  return (
    <Select<Fruit>
      multiple
      value={values()}
      onChange={(values) => {
        setValues(values);
      }}
      options={["apple", "banana", "cherry", "orange", "strawberry"] as const}
    ></Select>
  );
};
@r4ai r4ai changed the title The inferred type of the value props in a multiple Select component is incorrect The inferred type of the options props in a multiple Select component is incorrect Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant