admin管理员组文章数量:1327301
I need to add "Select All" option in my multi-select. It should be displayed if there is at least 1 filtered option. Click on "Select All" should then add only filtered options (not all options necessarily) to already selected options.
- Input is empty, so all options are "filtered":
Clicking on Select All option would then add all options to selected options.
- Input contains "custom", so only one option remains::
Clicking on Select All option would then add only that one option to selected options.
It was easy to add "Select all" option that adds all initial options, but that isn't the solution to my problem. I managed to partially solve my problem by manually filtering options and storing them filtered in ponent's state, but I hope there is a simpler solution.
I need to add "Select All" option in my multi-select. It should be displayed if there is at least 1 filtered option. Click on "Select All" should then add only filtered options (not all options necessarily) to already selected options.
- Input is empty, so all options are "filtered":
Clicking on Select All option would then add all options to selected options.
- Input contains "custom", so only one option remains::
Clicking on Select All option would then add only that one option to selected options.
It was easy to add "Select all" option that adds all initial options, but that isn't the solution to my problem. I managed to partially solve my problem by manually filtering options and storing them filtered in ponent's state, but I hope there is a simpler solution.
Share Improve this question edited Aug 30, 2019 at 9:21 brklja asked Aug 28, 2019 at 19:24 brkljabrklja 1473 silver badges13 bronze badges2 Answers
Reset to default 4I would use a bination of filterOption
, InputChange
and onChange
props:
- In
InputChange
you will catch theinputValue
every time the user changes it and store it into the state. This value will be reused inonChange
. - You need to change the initial
filterOption
to display yourSelect all
all the time. Original logic is ifinputValue
isnull
returnstrue
else returnstrue
isinputValue
is included in option label or value. Before doing this logic, we had an other condition where if option value corresponds to yourSelect all
option then returnstrue
right away. - In
onChange
; by default the returned options are those received. Then if an option has been selected (as it's multiple it could be removed) and this option isSelect all
, your returned value should be a copy of all the options and filter them by theinputValue
.
Maybe there's a simplest way to do it but I think this one it pretty effective:
onChange = (opt, { option }) => {
let newOpts = opt;
let string = this.state.searchField;
if (option && option.value === "all") {
let filteredOptions = clone(options);
filteredOptions = filteredOptions.filter(
filteredOption =>
isIncludingString(string, filteredOption) &&
!newOpts.includes(filteredOption)
);
string = null;
newOpts = newOpts
.concat(filteredOptions)
.filter(newOpt => newOpt.value !== "all");
}
this.setState({
searchField: string,
values: newOpts
});
};
onInputChange = (string, { action }) => {
if (action === "input-change") {
this.setState({
searchField: string
});
}
};
filterOption = ({ label, value }, string) => {
if (value === "all") {
return true;
} else if (string) {
return label.includes(string) || value.toString().includes(string);
} else {
return true;
}
};
Important note, in my example I use
clone
fromlodash
Below the isIncludingString
function used in onChange
.
function isIncludingString(string, option) {
let result = false;
if (
!string ||
option.label.toString().includes(string) ||
option.value.toString().includes(string)
) {
result = true;
}
return result;
}
Here a live example.
Here is the function that I used to convert all my existing multi selecters:
import React from "react";
import ReactSelect from "react-select";
const addSelectAllOptionIfIsMulti = (props) => {
if (!props.isMulti) {
return props;
}
const selectAllOption = {}; // just an object to be pared to by reference
const getOptionLabel = (obj) =>
obj === selectAllOption
? "Select all"
: props.getOptionLabel
? props.getOptionLabel(obj)
: obj.label;
const getOptionValue = (obj) =>
obj === selectAllOption
? selectAllOption
: props.getOptionValue
? props.getOptionValue(obj)
: obj.value;
const onChange = (values) => {
const selectedOptions = values.includes(selectAllOption)
? props.options
: values;
props.onChange(selectedOptions);
};
const options =
props.options.length === props.value?.length
? props.options
: [selectAllOption, ...props.options];
return { ...props, getOptionLabel, getOptionValue, onChange, options };
};
function Select({...props}){
return <ReactSelect {...addSelectAllOptionIfIsMulti(props)}/>
}
export default Select;
本文标签: javascriptReactselect isMulti select all filtered optionsStack Overflow
版权声明:本文标题:javascript - React-select isMulti select all filtered options - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742205538a2432744.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论