Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[v2] [help wanted] FilterOptions prevent create action CreatableSelect

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:12 (2 by maintainers)

Top GitHub Comments

3reactions

ebonowcommented, Dec 7, 2020

@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.

1reaction

rodbscommented, Dec 16, 2020

@ebonow It works now, Thanks!

Top Results From Across the Web

Advanced - React Select

React-Select exports a createFilter function that returns a filterOption method. ... is creatable, you would also likey want to include the "Create" option....

How do I create new option if there are no left while searching ...

You can achieve your goal using filterOption function like the following code: class App extends React.Component { constructor(props) ...

React Select Advanced Options - Medium

We can create a dropdown with creatable choices by using the CreatableSelect component. For instance, we can write:

react-select/CHANGELOG.md - UNPKG

17, - Remove base entrypoint to fix rollup dependency resolution issue ... 160, - async select now accepts a filterOptions function as a...

React Autocomplete component - Material UI - MUI

The value created by typing into the textbox is always a string, regardless of the type of the ... selectOnFocus to help the...