admin管理员组文章数量:1325510
I am trying to create a select element with react-select and I use the Creatable ponent for that.
With my current implementation, it won't prompt the user for "create" option on typing, as shown on the documentation It will show instead the default "No options".
I am also using redux-form
library but I don't think that the problem es from there.
Here is my code so far :
import Select from "react-select/creatable";
import React from "react";
const customFilter = (option, searchText) => {
return option.data.searchfield.toLowerCase().includes(searchText.toLowerCase());
};
export default (props) => {
const { input, options, placeholder } = props;
const renderValue = (value) => {
const val =
value === "" ? null : options.find((obj) => obj.value === input.value);
return val || "";
};
return (
<Select
value={renderValue(input.value)}
name={input.name}
onFocus={() => input.onFocus(input.value)}
onChange={(value) => input.onChange(value.value)}
onBlur={() => input.onBlur(input.value)}
options={options}
isRtl={true}
placeholder={placeholder}
filterOption={customFilter}
/>
);
};
EDIT :
I also tried from the docs to import the makeCreatableSelect
but it did not help:
import Creatable, { makeCreatableSelect } from 'react-select/creatable';
<Creatable
//here goes props
/>
I am trying to create a select element with react-select and I use the Creatable ponent for that.
With my current implementation, it won't prompt the user for "create" option on typing, as shown on the documentation It will show instead the default "No options".
I am also using redux-form
library but I don't think that the problem es from there.
Here is my code so far :
import Select from "react-select/creatable";
import React from "react";
const customFilter = (option, searchText) => {
return option.data.searchfield.toLowerCase().includes(searchText.toLowerCase());
};
export default (props) => {
const { input, options, placeholder } = props;
const renderValue = (value) => {
const val =
value === "" ? null : options.find((obj) => obj.value === input.value);
return val || "";
};
return (
<Select
value={renderValue(input.value)}
name={input.name}
onFocus={() => input.onFocus(input.value)}
onChange={(value) => input.onChange(value.value)}
onBlur={() => input.onBlur(input.value)}
options={options}
isRtl={true}
placeholder={placeholder}
filterOption={customFilter}
/>
);
};
EDIT :
I also tried from the docs to import the makeCreatableSelect
but it did not help:
import Creatable, { makeCreatableSelect } from 'react-select/creatable';
<Creatable
//here goes props
/>
Share
Improve this question
edited Jul 6, 2020 at 2:30
Emma
27.8k11 gold badges48 silver badges71 bronze badges
asked Jul 5, 2020 at 16:56
usernameUnknownusernameUnknown
1131 gold badge1 silver badge7 bronze badges
1 Answer
Reset to default 4I think your problem here es from your custom filter implementation
This a little bit tricky, because from the docs there is no example of the CreatableSelect with an implementation of custom filter.
To solve this, your custom filters must retrun "undefined"
in order to "tell" to the <CreatableSelect />
ponent that there is no such option.
So here is one option to achieve this :
const customFilter = (option, searchText) => {
return option.data.searchfield !== undefined ? option.data.searchfield.toLowerCase().includes(searchText.toLowerCase())
: "undefined"
};
In this way your CreatableSelect will known if the value was found
Another problem that I noticed in your code is that your renderValue
method will return an empty string when it does not find a matching option...not good : if you want the users to create option you have to render it when it will be created...not an empty string.
So replace this by something like :
const renderValue = (value) => {
const val = value === "" ?
null :
options.find((obj) => obj.value === input.value);
return val || {value : value, label: value};
};
That will create your new option. Of course you can change the label by your own logic.
本文标签: javascriptReact Select Creatable quotno optionsquot instead of quotcreatequotStack Overflow
版权声明:本文标题:javascript - React Select Creatable "no options" instead of "create" - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742196826a2431232.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论