Async select with select all #4855
Replies: 4 comments 3 replies
-
|
I am not sure that AsyncSelect would be a good candidate for select all. An AsyncSelect is meant as a wrapper for api's which act like a server-side auto-complete - generally something which has a large data source (such as a list of cities in a given country). In this context, "Select All" only applies to some list of options based on the input - ie: only things with match with whatever the user input. You likely mean a Select whose options are populated from an api request, but then allow the user to select all those options from a finite and countable list. Is this correct? |
Beta Was this translation helpful? Give feedback.
-
|
Eric, i guess what i need is AsyncSelect with a custom option. You are correct that there is no per se "All selection" but i do wan to have that option there.... Hope that make sense... |
Beta Was this translation helpful? Give feedback.
-
|
But what does "Select All" mean? If the user types "cat" for example, do you only want to select options that contain the string "cat" or do you want to "Select All" possible options? Approximately how large is your data set? |
Beta Was this translation helpful? Give feedback.
-
|
Sorry Eric, i see where the confusion is... The custom option im talking about (that u refer to as 'Select All') is actually a custom option that is just nested there - its sole purpose is to pass a custom value to the backend.... In your example it will say 'Select All cats' -- it will say that regardless of what u chose or what u are looking for. |
Beta Was this translation helpful? Give feedback.
-
|
It doesn't really make sense to me still, because "cat" was an example input text, but may have nothing to do with the animal. Here's an example codesandbox: It's an AsyncSelect with a list of compliments.
What's "all" selected? Async is generally meant to be an autocompleted response, so it's likely some options were not even shown to the user perhaps due to a paginated response. One example is a location lookup our company provides to search through a list of known locations. It doesn't even query results but typing "ave" returns 1100+ results, so we only show the first 50 results. So if the user types "ave" and the user selects the "select all" option, is the user selecting:
So again the UX you are asking for doesn't seem to fit with the request. All of the options of the AsyncSelect are dynamic based on the input. This input would be cleared out. |
Beta Was this translation helpful? Give feedback.
-
|
As a precursor, I say this, because I tried to build it. This should be about what you expected. I have comments below in the code to walk through the steps, but again, While it may not make a lot of sense to me, perhaps this fits what you are looking for: import { useCallback, useState } from "react";
import { components } from "react-select";
import AsyncSelect from "react-select/async";
import { compliments } from "../data/options";
const App = (props) => {
const [loadedOptions, setLoadedOptions] = useState([]);
const [value, setValue] = useState([]);
const [allSelected, setAllSelected] = useState(false);
const selectAllValues = useCallback(() => {
setValue(loadedOptions);
setAllSelected(true);
}, [loadedOptions]);
const deselectAllValues = useCallback(() => {
setValue([]);
setAllSelected(false);
}, []);
const selectValue = useCallback((val) => {
setValue(val);
setAllSelected(false);
}, []);
// Determine what option was selected or unselected
const onChange = useCallback(
(val, { removedValue, option }) => {
option?.value === "select-all"
? selectAllValues()
: removedValue?.value === "select-all"
? deselectAllValues()
: selectValue(val);
},
[selectAllValues, deselectAllValues, selectValue]
);
const loadOptions = (query, callback) => {
const q = query?.toLowerCase();
const selectAllOption = { label: "Select All", value: "select-all" };
const apiGetOptions = () =>
Promise.resolve(compliments.filter((c) => c.value.includes(q)));
apiGetOptions(query).then((results) => {
console.log(`${results.length} results returned for input '${query}'`);
const options = [selectAllOption, ...results];
// save these options so we can know what to set as the value when select-all
setLoadedOptions(options);
callback(options);
});
};
const isOptionDisabled = useCallback(
(opt) => allSelected && opt.value !== "select-all",
[allSelected]
);
return (
<>
<AsyncSelect
value={value}
loadOptions={loadOptions}
onChange={onChange}
isMulti
isOptionDisabled={isOptionDisabled}
components={{ MultiValue }}
allSelected={allSelected}
/>
</>
);
};
const MultiValue = (props) => {
console.log(props.selectProps.allSelected, props.data);
return props.selectProps.allSelected &&
props.data.value !== "select-all" ? null : (
<components.MultiValue {...props} />
);
};
export default App; |
Beta Was this translation helpful? Give feedback.
-
|
i will give this a try.
Thanks!
CUBE Workspace
Corporate: 6240 Som Center Rd #130
Solon, OH 44139
T: 216.245.9629
…On Mon, Oct 11, 2021 at 6:09 PM Eric Bonow ***@***.***> wrote:
As a precursor, I say this, because I tried to build it.
This should be about what you expected. I have comments below in the code
to walk through the steps, but again, isOptionDisabled is unneeded
because there are no menu options after there's been a selection.
While it may not make a lot of sense to me, perhaps this fits what you are
looking for:
https://codesandbox.io/s/react-select-all-sjpqm?file=/src/App.js
import { useCallback, useState } from "react";import { components } from "react-select";import AsyncSelect from "react-select/async";import { compliments } from "../data/options";
const App = (props) => {
const [loadedOptions, setLoadedOptions] = useState([]);
const [value, setValue] = useState([]);
const [allSelected, setAllSelected] = useState(false);
const selectAllValues = useCallback(() => {
setValue(loadedOptions);
setAllSelected(true);
}, [loadedOptions]);
const deselectAllValues = useCallback(() => {
setValue([]);
setAllSelected(false);
}, []);
const selectValue = useCallback((val) => {
setValue(val);
setAllSelected(false);
}, []);
// Determine what option was selected or unselected
const onChange = useCallback(
(val, { removedValue, option }) => {
option?.value === "select-all"
? selectAllValues()
: removedValue?.value === "select-all"
? deselectAllValues()
: selectValue(val);
},
[selectAllValues, deselectAllValues, selectValue]
);
const loadOptions = (query, callback) => {
const q = query?.toLowerCase();
const selectAllOption = { label: "Select All", value: "select-all" };
const apiGetOptions = () =>
Promise.resolve(compliments.filter((c) => c.value.includes(q)));
apiGetOptions(query).then((results) => {
console.log(`${results.length} results returned for input '${query}'`);
const options = [selectAllOption, ...results];
// save these options so we can know what to set as the value when select-all
setLoadedOptions(options);
callback(options);
});
};
const isOptionDisabled = useCallback(
(opt) => allSelected && opt.value !== "select-all",
[allSelected]
);
return (
<>
<AsyncSelect
value={value}
loadOptions={loadOptions}
onChange={onChange}
isMulti
isOptionDisabled={isOptionDisabled}
components={{ MultiValue }}
allSelected={allSelected}
/>
</>
);};
const MultiValue = (props) => {
console.log(props.selectProps.allSelected, props.data);
return props.selectProps.allSelected &&
props.data.value !== "select-all" ? null : (
<components.MultiValue {...props} />
);};export default App;
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#4855 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AMKORZS6QXJ4ZK4IRLGZZBTUGNOAFANCNFSM5FWRATJQ>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello, im looking for a good example with an async select that have a select all option.
I'd like it to appear as a seperate menu item ( the top one) where u click a chekcbox to select all in return it willl disbale all the other options and show a lable at the input that all options are selected.
Obviouslly the state has to be ketp so when menu is open again the select all is checked....
I was impleemnt to implement this with an outside checkbox and then onChnage simply disbaled the whole compoenent but it seems like not such a good UX.
Can someone point me in the right direection ?
Beta Was this translation helpful? Give feedback.
All reactions