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

Custom Filter with filterOptions is not working with V4.1.6 #253

Open
cjadhav opened this issue Dec 2, 2022 · 1 comment
Open

Custom Filter with filterOptions is not working with V4.1.6 #253

cjadhav opened this issue Dec 2, 2022 · 1 comment

Comments

@cjadhav
Copy link

cjadhav commented Dec 2, 2022

Describe the bug
I am looking for custom filter implementation for options provided. My implementationwas workig till v3.x.x but as soon as I updated to latest v4.1.6 I am getting Type Error.

I am implementing as follows,

<SelectSearch
        search={search}
        filterOptions={search ? (e) => filterDropdownOptions(e) : null}
        options={options || []}
        autoComplete="none"
        value={_.isObject(value) ? value.value.toString() : value}
        onChange={(value, object) => onChange(object)}
        {...rest}
     />

Where as filterDropdownOptions function is as follows,

export function filterDropdownOptions(options = [], allowToAdd = false) {
  return (value) => {
    if (!value.length) return options;

    const lstOptions = _.filter(
      options,
      (obj) => obj.name !== null && obj.name.toString().toLowerCase().startsWith(value.toLowerCase())
    );
   return lstOptions;
  };
}

The above code works fine for v3 but when i updated module to v4.1.6 then getting following error as,
TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

To Reproduce
Steps to reproduce the behavior:

  1. Add above mentioned code.
  2. See compilation Type error

Expected behavior
It should not show any error and allow to filter the list as per user typed value.

Screenshots
Screenshot 2022-12-02 at 1 16 50 PM

Desktop:

  • OS: Mac OS 12.6
  • Browser: Chrome
  • Version : 107.0.5304.110

Additional context
The main agenda to update the module is to highlight the first option on list.(with & without filter).
If we have any solution for that will be great help.

Thanks

@fmmajd
Copy link

fmmajd commented Feb 7, 2023

In the newer versions, filterOptions should be an array, so try it like this:

<SelectSearch
        search={search}
        filterOptions={search ? [(e) => filterDropdownOptions(e)] : []}
        options={options || []}
        autoComplete="none"
        value={_.isObject(value) ? value.value.toString() : value}
        onChange={(value, object) => onChange(object)}
        {...rest}
     />```

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

2 participants