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

[BUG] Type for onRemove seems to be incorrect #187

Closed
floatplane opened this issue Feb 17, 2023 · 2 comments · Fixed by #188
Closed

[BUG] Type for onRemove seems to be incorrect #187

floatplane opened this issue Feb 17, 2023 · 2 comments · Fixed by #188
Labels
bug Something isn't working documentation Improvements or additions to documentation

Comments

@floatplane
Copy link

Describe the bug
As far as I can tell, onRemove is always called with a single item, yet it's declared to accept multiple items:

/**
* Callback that is called when option(s) is cleared
*
* @param option removed option(s)
* @param optionIndex removed option(s) index(es)
* @category Callback
*/
onRemove?: <T>(option: OptionType<T> | OptionType<T>[], optionIndex: number | number[]) => void;

Because of this, I get TypeScript errors in my code unless I convince the compiler that I know what I'm doing:

      <Select
        onRemove={(option) => {
          const removedValue = Array.isArray(option) ? option[0].value : option.value;
          // ... do something with removedValue
        }}

Notice that the example in the repo has to actively suppress this error with as OptionType:

onRemove={(option) => {
field.onChange(
field.value.filter(
(item) => item.value !== (option as OptionType).value,
),
);
}}

To Reproduce
Steps to reproduce the behavior:

  1. Set up a TypeScript app
  2. Add an onRemove handler
  3. See compile error

Expected behavior
No compile errors in code like this:

const Foo = () => (
  <Select
    multiple
    options={[
      {label: 'One', value: '1'},
      {label: 'two', value: '2'},
      {label: 'Three', value: '3'},
    ]}
    onSelect={
      ({value}, optionIndex) => {
        console.log(`Selected ${value} which is the ${optionIndex}th item`)
      }
    }
    onRemove={
      ({value}, optionIndex) => {
        console.log(`Removed ${value} which is the ${optionIndex}th item`)
      }
    }
  />
);

Screenshots
image

Environment (please complete the following information):

  • OS: any
  • OS Version: any
@floatplane floatplane added bug Something isn't working documentation Improvements or additions to documentation labels Feb 17, 2023
@irekrog irekrog linked a pull request Feb 20, 2023 that will close this issue
@irekrog
Copy link
Collaborator

irekrog commented Feb 20, 2023

Hi @floatplane , thanks for reporting, and you can use the latest version 2.1.1

@floatplane
Copy link
Author

thanks for the quick fix @irekrog! really appreciate it 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants