Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Select): Selecting all does not affect options that are already disabled 4802 #4848

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(Select): Selecting all does not affect options that are already disabled 4802 #4848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions components/select/__tests__/issue-spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,54 @@ describe('issue in AutoComplete', () => {
cy.get('.next-menu-item').should('have.length', 3);
});
});

describe('issue in Select', () => {
it('Selecting all does not affect options that are already disabled, close #4802', () => {
const onChange = cy.spy().as('onChange');
const dataSource = [
{ value: '10001', label: 'Lucy King' },
{ value: '10002', label: 'Lily King' },
{ value: '10003', label: 'Tom Cat', disabled: true },
{
label: 'Special Group',
children: [
{ value: '-1', label: 'FALSE' },
{ value: '0', label: 'ZERO' },
],
},
];
cy.mount(
<Select
placeholder="select all"
hasSelectAll
mode="multiple"
onChange={onChange}
dataSource={dataSource}
defaultValue={['10003']}
/>
);
cy.get('.next-select input').eq(0).click();
cy.get('.next-select-all').eq(0).click();
cy.get('.next-tag-closable').should('have.length', 5);
cy.get('.next-select input').eq(0).click();
cy.get('.next-select-all').eq(0).click();
cy.get('.next-tag-closable').should('have.length', 1);

cy.mount(
<Select
placeholder="select all"
hasSelectAll
mode="multiple"
onChange={onChange}
dataSource={dataSource}
/>
);
cy.get('.next-select input').eq(0).click();
cy.get('.next-select-all').eq(0).click();
cy.get('.next-tag-closable').should('have.length', 4);

cy.get('.next-select input').eq(0).click();
cy.get('.next-select-all').eq(0).click();
cy.get('.next-tag-closable').should('have.length', 0);
});
});
20 changes: 18 additions & 2 deletions components/select/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -685,13 +685,29 @@
*/
handleSelectAll(e: UIEvent<HTMLElement>) {
e && e.preventDefault();
const { value } = this.state;
type DataSourceItem = ObjectItem | string | boolean | number | null | undefined;

let nextValues: Exclude<DataSourceItem, ObjectItem>[];

const enabledData = this.dataStore.getEnableDS().map(item => String(item.value));

const disabledSelectedValues = ((value as DataSourceItem[]) || []).filter(item => {
if (
typeof item === 'object' &&
item !== null &&
!enabledData.includes(String(item.value))
) {
return item.value;
}
return !enabledData.includes(String(item));
});

if (this.selectAllYet) {
nextValues = [];
nextValues = [...(disabledSelectedValues as ObjectItem['value'][])];
} else {
nextValues = [
...((this.state.value as DataSourceItem[]) || []).map(item => {
...((value as DataSourceItem[]) || []).map(item => {
if (typeof item === 'object' && item !== null) {
return item.value;
}
Expand Down Expand Up @@ -993,7 +1009,7 @@
);

return (
<span

Check warning on line 1012 in components/select/select.tsx

View workflow job for this annotation

GitHub Actions / changed 

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check warning on line 1012 in components/select/select.tsx

View workflow job for this annotation

GitHub Actions / changed 

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
{...othersData}
className={triggerClazz}
style={style}
Expand Down Expand Up @@ -1117,7 +1133,7 @@
// remove style={{'lineHeight': 'unset'}} in next Y
// remove style={{'display': 'none'}} in next Y
return (
<div

Check warning on line 1136 in components/select/select.tsx

View workflow job for this annotation

GitHub Actions / changed 

Visible, non-interactive elements with click handlers must have at least one keyboard listener
key="all"
onClick={this.handleSelectAll}
className={cls}
Expand Down
Loading