onChange option type casting conflict with unknown.

[harsimarriar96-dappquire]

<Select
                onBlur={onBlur}
                onChange={(option: Option): void => {
                  onChange(option.value ?? '');
                }}
                options={productTypes}
                placeholder="Select a product type"
                value={value}
              /> 

Type '(option: Option) => void' is not assignable to type '(newValue: unknown, actionMeta: ActionMeta<unknown>) => void'.
  Types of parameters 'option' and 'newValue' are incompatible.
    Type 'unknown' is not assignable to type 'Option'.ts(2322)
Select.d.ts(164, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Props'

I am unable to typecast properly for onChange event, there is no specific documentation, whatever available online looks outdated.

[thereis]

Yes, I am facing the same issue, I am leaving it as a any. Gladly it's a legacy project that will be rewritten in the future, if you're still looking for a very decent component library go to mantine.dev

[YASHWANTHKESAGONI]

@harsimarriar96-dappquire I am new to the open source can u assign me the task, I would like to work on this.

[tomas223]

I started to use the library only recently, so I'm not sure if it worked before.

But you can add its' Type directly to the component's JSX. For Multi-Select you can apply Type <Option, true>:

type Option = {
  value: string;
  label: string;
};

export const MySelect = (props: Props) => {
  return <Select<Option, true> options={STATUS_OPTIONS} isMulti />;
};

[ArianHamdi]

Same here. It should infer the type from options

[shuo-hiwintech]

+1

[alas1n]

I don't know If this is my problem or not but this issue is happening when trying to wrap select in typescript react: here I follow the instructions in document and get the conflict type error

here is the code

import ReactSelect, { GroupBase, Props } from 'react-select';

export function NewSelectField<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>,
>(props: Props<Option, IsMulti, Group>) {
  return (
    <ReactSelect
      {...props}
      theme={(theme) => ({ ...theme, borderRadius: 0 })}
    />
  );
}

and here is the error

import type { Meta, StoryObj } from '@storybook/react';
import { NewSelectField } from '.';
import { useState } from 'react';
import { SingleValue } from 'react-select';

type Option = {
  value: string;
  label: string;
};
const options: Option[] = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

const meta: Meta<typeof NewSelectField> = {
  component: NewSelectField,
  title: 'NewSelectField',
  argTypes: {},
  render: function Render({ ...args }) {
    const [val, setVal] = useState<SingleValue<Option>>();

    const handleChange = (option: SingleValue<Option>) => {
      setVal(option);
    };

    return (
      <NewSelectField
        value={val}
        options={options}
        onChange={handleChange}
        {...args}
      />
    );
  },
};
export default meta;
type Story = StoryObj<typeof NewSelectField>;

export const Accent: Story = {};

[johnandresmedina]

+1 having the same issue