combobox - select all example #3378
Conversation
|
|
@ThusharaJ07 is attempting to deploy a commit to the FED Team Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| style={{ width: "266px" }} | ||
| > | ||
| {filteredOptions.length > 1 && ( | ||
| <Option |
There was a problem hiding this comment.
Select All should be in it's own which will allow you to remove the styles.
There was a problem hiding this comment.
Not sure what you mean by this.
There was a problem hiding this comment.
Sorry a word got omitted, OptionGroup should be used here
| ) => { | ||
| let newOptionsSelected = [...newSelected]; | ||
| //case: clear all if select all is unselected | ||
| if ( |
There was a problem hiding this comment.
The comment above says this check is for is all is unselected but the logic is for if all is selected and it was previously selected?
There was a problem hiding this comment.
corrected the comment, it for case where all select all was previously selected, if user unselects any option, then select all should be unselected
There was a problem hiding this comment.
Whenever we need comments to explain code, it's usually a sign that the code does not explain itself and there is potential to refactor.
As these code are docs, it's worthwhile to consider how we could make the code, explain itself.
const handleSelectionChange: DropdownProps["onSelectionChange"] = (
event,
newSelected
) => {
let newOptionsSelected = [...newSelected];
const wasAllSelected = selected.includes(allSelectedOptionValue);
const isAllSelected = newOptionsSelected.includes(allSelectedOptionValue);
if (wasAllSelected) {
if (isAllSelected) {
newOptionsSelected = newOptionsSelected.filter(
(el) => el !== allSelectedOptionValue
);
} else {
newOptionsSelected = [];
}
} else if (
isAllSelected ||
(!isAllSelected && newOptionsSelected.length === usStates.length)
) {
newOptionsSelected = [...usStates, allSelectedOptionValue];
}
setSelected(newOptionsSelected);
args.onSelectionChange?.(event, newOptionsSelected);
};
How about this, any easier to read?
There was a problem hiding this comment.
yes its easier! I have updated this. Thanks Mark for this.
…dropdown-select-all-example
There was a problem hiding this comment.
When i use keyboard to toggle "Select All" option (https://62565e7f.saltdesignsystem-storybook.pages.dev/?path=/story/core-dropdown--select-all), focus is changed to the 2nd item. Is it the intent?
Hey @origami-z , this is an existing issue in dropdown which Shey said will have a word with the team separately. not related to this example. |
I can only see the issue in dropdown but not combobox, is it to do with |
ThusharaJ07
changed the title
ThusharaJ07
changed the title
Implements #3307