Custom Filter with filterOptions is not working with V4.1.6

[cjadhav]

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

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]

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}
     />```