How can I type onChange ?

[SebUndefined]

Hi,

Is it possible to type onChange properly. I followed the instructions defined here so I ended up with

export interface SelectCommonProps<T> {
  placeholder?: string
  value?: SelectValue<T> | null
  options?: SelectableValue<T>[]
  debounceDelayOnChange?: number
  minCharsForSearch?: number
  // Events
  onInputChange?: (value: string, actionMeta: InputActionMeta) => void
  onChange?:
    | ((
        value: SelectableValue<T>,
        actionMeta: ActionMeta<SelectableValue<T>>
      ) => void)
    | ((
        value: SelectableValue<T>[],
        actionMeta: ActionMeta<SelectableValue<T>>
      ) => void)
  //getOptionValue?: (item: SelectableValue<T>) => T | undefined
  getOptionLabel?: (option: T) => string
  isOptionSelected?: (
    option: SelectableValue<T>,
    values: Options<SelectableValue<T>>
  ) => boolean
}

<ReactSelectComponent
          unstyled={true}
          classNames={{ ...style.classNamesConfig }}
          styles={{ ...style.stylesConfig }}
          components={{
            DropdownIndicator: ExtraComponents.DropdownIndicator,
            ClearIndicator: ExtraComponents.ClearIndicator,
            MultiValueRemove: ExtraComponents.MultiValueRemove,
          }}
          {...commonOptions} // Here are my common props
        />

As the options are of type SelectableValue<T>[], I would expect that the onChange method would adapt herself but instead, I have the following error

TS2322: Type

{     placeholder: string | undefined;     value: SelectValue<T> | null | undefined;     options: SelectableValue<T>[] | undefined;     isMulti: boolean;     onInputChange: ((value: string, actionMeta: InputActionMeta) => void) | undefined;     ... 4 more ...;     components: { ...; }; }

is not assignable to type

Partial<PublicBaseSelectProps<unknown, boolean, GroupBase<unknown>>>

Types of property onChange are incompatible.
Type
((value: SelectableValue<T>, actionMeta: ActionMeta<SelectableValue<T>>) => void) | ((value: SelectableValue<T>[], actionMeta: ActionMeta<...>) => void) | undefined
is not assignable to type
((newValue: unknown, actionMeta: ActionMeta<unknown>) => void) | undefined
Type
(value: SelectableValue<T>, actionMeta: ActionMeta<SelectableValue<T>>) => void
is not assignable to type
(newValue: unknown, actionMeta: ActionMeta<unknown>) => void
Types of parameters value and newValue are incompatible.
Type unknown is not assignable to type SelectableValue

Is it possible to achieve such method ? Or do I have to do a switch case depending on the ActionMeta... Doc is pretty poor about this subject...

Complete Code of the wrapper

import { SelectableValue, SelectRootProps } from './types.ts'
import Select, {
  ActionMeta,
  InputActionMeta,
  OnChangeValue,
  SingleValue,
} from 'react-select'
import { Field } from '@headlessui/react'
import style from './styles.ts'
import ExtraComponents from './ExtraComponents.tsx'
import React from 'react'
import _ from 'lodash'

const SelectRoot = <T,>({
  placeholder,
  value,
  options,
  debounceDelayOnChange = 1000,
  minCharsForSearch = 3,
  onInputChange,
  onChange,
  isOptionSelected,
}: SelectRootProps<T>) => {
  const handleDebounceFn = (inputValue: string, action: InputActionMeta) => {
    if (inputValue && inputValue.length >= minCharsForSearch) {
      onInputChange && onInputChange(inputValue, action)
    }
  }
  const onInputChangedWithDebounce = React.useMemo(
    () => _.debounce(handleDebounceFn, debounceDelayOnChange),
    []
  )
  const commonOptions = {
    placeholder: placeholder,
    value: value,
    options: options,
    isMulti: false,
    onInputChange:
      debounceDelayOnChange > 0 ? onInputChangedWithDebounce : onInputChange,
    onChange,
  }
  // Define component
  let ReactSelectComponent = Select
  return (
    <>
      <Field>
        <ReactSelectComponent
          unstyled={true}
          classNames={{ ...style.classNamesConfig }}
          styles={{ ...style.stylesConfig }}
          components={{
            DropdownIndicator: ExtraComponents.DropdownIndicator,
            ClearIndicator: ExtraComponents.ClearIndicator,
            MultiValueRemove: ExtraComponents.MultiValueRemove,
          }}
          {...commonOptions}
        />
      </Field>
    </>
  )
}

export default SelectRoot

And a simple call (from another wrapper which use react hook form

interface SelectInputProps<FormData extends FieldValues, TData>
  extends SelectRootProps<TData>,
    UseControllerProps<FormData> {}

const SelectInput = <FormData extends FieldValues, TData>({
  name,
  shouldUnregister,
  defaultValue,
  rules,
  control,
  onChange,
  ...rest
}: SelectInputProps<FormData, TData>) => {
  return (
    <Controller
      name={name}
      control={control}
      rules={rules}
      defaultValue={defaultValue}
      shouldUnregister={shouldUnregister}
      render={({ field }) => {
        return <Select {...field} {...rest} onChange={onChange} />
      }}
    />
  )
}

export default SelectInput

[mortezakarimi]

I have same problem 👍🏼