React-select: [v2] [help wanted] FilterOptions prevent create action CreatableSelect

[lbelavoir]

Use case

I have tried to add a filterOption props on a CreatableSelect the result is the filterOption works but I have lost the Create ... option in the select dropdown.

The filter options are pretty standard:

const filterOptions = createFilter({
  ignoreCase: true,  
  ignoreAccents: true,
  matchFrom: 'start'
})

Live example

https://codesandbox.io/s/j3834v8o3

Result previews

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

[lbelavoir]

This is still an issue on [email protected], can you please consider a fix ?

[bladey]

Thanks @lbelavoir!

[drbeat]

Just ran into the same issue.

[ebonow]

@lbelavoir Your live example does not correspond with what you provided as the codesandbox example is not Createable which is maybe why you might not be seeing a create option.

Please refer to this codesandbox and verify that the issue is still present for you. If so I can reopen the issue.

[lbelavoir]

Still a failure and v2 see the example but working correctly on 3.1.1 !

[ebonow]

@lbelavoir It looks like your import seems a bit off.

Try changing your import from:
import CreateSelectable from "react-select";

for V3 use:
import Createable from "react-select/creatable";
https://codesandbox.io/s/react-select-creatable-filteroptions-v311-092x3?file=/src/App.js

or for V2 use:
import { Createable } from "react-select";
https://codesandbox.io/s/react-select-creatable-filteroptions-v244-t58w7?file=/src/App.js

That should hopefully be working for you better.

[rodbs]

It's not working for me.
I've created this filter to filter by the beginning of the word, but then the "Create" option disappears (v 3.1.1).
Does anyone know why? is it supposed to be fixed?

 <CreatableSelect                
                  onChange={handleChange}
                  onInputChange={handleInputChange}
                  onCreateOption={handleCreate}
                  options={wordSelect}
                  createOptionPosition={2}
                  filterOption={customFilterOption}
                />

```
const customFilterOption = (option, rawInput) => {
const words = rawInput.split(" ");
return words.reduce(
(acc, cur) =>

    acc && option.label.toLowerCase().startsWith(cur.toLowerCase()),
  true
);

};
```

[ebonow]

@rodbs Please try using filterOptions instead of filterOption and see if it works better for you.

Sorry for the confusion many of the filterOption examples use a variable name filterOptions which apparently was a v1 prop name and I got my wires crossed.

To keep the create option as part of the filter you can use this:

  const customFilterOption = (option, rawInput) => {
    const words = rawInput.toLowerCase().split(" ");
    return (
      option.data.__isNew__ ||
      words.reduce(
        (acc, cur) => acc && option.label.toLowerCase().startsWith(cur),
        true
      )
    );
  };

Demo: codesandbox

[rodbs]

@ebonow

It's weird.
Using filterOptions the create option works but the filtering doesn't (doesn't filter by the beginning of the input).
Using filterOption, the filtering option works but the create new option disappears.

[ebonow]

sorry @rodbs updated response above

What you are likely looking for is option.data.__isNew__ in your customFilterOption

[rodbs]

@ebonow It works now, Thanks!