Skip to content

fix(ui5-multi-combobox): correct Select All with grouped items and n-more popover #13721

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

Open
Vonahz wants to merge 8 commits into
base: main
Choose a base branch
from
+428 −23
Open

fix(ui5-multi-combobox): correct Select All with grouped items and n-more popover #13721

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cc2654d
fix(ui5-multi-combobox): correct Select All with grouped items and n-…
Vonahz Jun 24, 2026
53b8afa
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
Vonahz Jun 24, 2026
eebc7a2
Merge branch 'main' into mcmbbx_selectall
nnaydenow Jun 24, 2026
9bb22d8
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
Vonahz Jun 30, 2026
a0a0a0c
fix(ui5-multi-combobox): correct Select All with grouped items and n-…
Vonahz Jun 30, 2026
fdcc000
fix(ui5-multi-combobox): correct Select All with grouped items and n-…
Vonahz Jun 30, 2026
7e1ca02
fix(ui5-multi-combobox): correct Select All with grouped items and n-…
Vonahz Jun 30, 2026
f1b3fbb
fix(ui5-multi-combobox): correct Select All with grouped items and n-…
Vonahz Jun 30, 2026
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
245 changes: 245 additions & 0 deletions packages/main/cypress/specs/MultiComboBox.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -704,6 +704,251 @@ describe("General", () => {
}));
});

it("Select All checkbox state with grouped items", () => {
cy.mount(
<MultiComboBox noValidation={true} showSelectAll={true} onSelectionChange={cy.stub().as("selectionChangeEvent")}>
<MultiComboBoxItemGroup headerText="Group 1">
<MultiComboBoxItem text="Item 1"></MultiComboBoxItem>
<MultiComboBoxItem text="Item 2"></MultiComboBoxItem>
</MultiComboBoxItemGroup>
<MultiComboBoxItemGroup headerText="Group 2">
<MultiComboBoxItem text="Item 3"></MultiComboBoxItem>
<MultiComboBoxItem text="Item 4"></MultiComboBoxItem>
</MultiComboBoxItemGroup>
</MultiComboBox>
);

cy.get("[ui5-multi-combobox]")
.as("mcb")
.realClick();

cy.get("@mcb")
.shadow()
.find(".inputIcon")
.realClick();

cy.get("@mcb")
.shadow()
.find<ResponsivePopover>("ui5-responsive-popover")
.as("popover")
.ui5ResponsivePopoverOpened();

// Verify checkbox is initially unchecked
cy.get("@popover")
.find(".ui5-mcb-select-all-checkbox")
.as("checkbox")
.should("not.have.attr", "checked");

// Click Select All
cy.get("@checkbox")
.realClick();

// Verify checkbox is now checked
cy.get("@checkbox")
.should("have.attr", "checked");

// Verify all 4 items are selected (not 2 groups)
cy.get("@selectionChangeEvent")
.should("have.been.calledWithMatch", Cypress.sinon.match(event => {
return event.detail.items.length === 4;
}));

// Click Select All again to deselect
cy.get("@checkbox")
.realClick();

// Verify checkbox is unchecked
cy.get("@checkbox")
.should("not.have.attr", "checked");

// Verify all items are deselected
cy.get("@selectionChangeEvent")
.should("have.been.calledWithMatch", Cypress.sinon.match(event => {
return event.detail.items.length === 0;
}));
});

it("Select All checkbox with partial selection in groups", () => {
cy.mount(
<MultiComboBox noValidation={true} showSelectAll={true}>
<MultiComboBoxItemGroup headerText="Group 1">
<MultiComboBoxItem text="Item 1" selected={true}></MultiComboBoxItem>
<MultiComboBoxItem text="Item 2"></MultiComboBoxItem>
</MultiComboBoxItemGroup>
<MultiComboBoxItemGroup headerText="Group 2">
<MultiComboBoxItem text="Item 3"></MultiComboBoxItem>
<MultiComboBoxItem text="Item 4"></MultiComboBoxItem>
</MultiComboBoxItemGroup>
</MultiComboBox>
);

cy.get("[ui5-multi-combobox]")
.as("mcb")
.realClick();

cy.get("@mcb")
.shadow()
.find(".inputIcon")
.realClick();

cy.get("@mcb")
.shadow()
.find<ResponsivePopover>("ui5-responsive-popover")
.as("popover")
.ui5ResponsivePopoverOpened();

// Verify checkbox is unchecked (1 out of 4 items selected)
cy.get("@popover")
.find(".ui5-mcb-select-all-checkbox")
.should("not.have.attr", "checked");
});

it("Select All checkbox checked when all grouped items selected initially", () => {
cy.mount(
<MultiComboBox noValidation={true} showSelectAll={true}>
<MultiComboBoxItemGroup headerText="Group 1">
<MultiComboBoxItem text="Item 1" selected={true}></MultiComboBoxItem>
<MultiComboBoxItem text="Item 2" selected={true}></MultiComboBoxItem>
</MultiComboBoxItemGroup>
<MultiComboBoxItemGroup headerText="Group 2">
<MultiComboBoxItem text="Item 3" selected={true}></MultiComboBoxItem>
<MultiComboBoxItem text="Item 4" selected={true}></MultiComboBoxItem>
</MultiComboBoxItemGroup>
</MultiComboBox>
);

cy.get("[ui5-multi-combobox]")
.as("mcb")
.realClick();

cy.get("@mcb")
.shadow()
.find(".inputIcon")
.realClick();

cy.get("@mcb")
.shadow()
.find<ResponsivePopover>("ui5-responsive-popover")
.as("popover")
.ui5ResponsivePopoverOpened();

// Verify checkbox is checked (all 4 items selected)
cy.get("@popover")
.find(".ui5-mcb-select-all-checkbox")
.should("have.attr", "checked");
});

it("Select All preserves filter value when filtering", () => {
cy.mount(
<MultiComboBox noValidation={true} showSelectAll={true}>
<MultiComboBoxItem text="Argentina"></MultiComboBoxItem>
<MultiComboBoxItem text="Australia"></MultiComboBoxItem>
<MultiComboBoxItem text="Bulgaria"></MultiComboBoxItem>
<MultiComboBoxItem text="Belgium"></MultiComboBoxItem>
</MultiComboBox>
);

cy.get("[ui5-multi-combobox]")
.as("mcb")
.realClick();

// Type "a" to filter
cy.get("@mcb")
.shadow()
.find("#ui5-multi-combobox-input")
.as("input")
.realType("a");

// Wait for popover to open with filtered items
cy.get("@mcb")
.shadow()
.find<ResponsivePopover>("ui5-responsive-popover")
.as("popover")
.ui5ResponsivePopoverOpened();

// Click Select All
cy.get("@popover")
.find(".ui5-mcb-select-all-checkbox")
.realClick();

// Verify input value is still "a"
cy.get("@input")
.should("have.value", "a");

// Verify only 2 filtered items are selected (Argentina, Australia)
cy.get("@mcb")
.shadow()
.find("[ui5-token]")
.should("have.length", 2);
});

it("Select All with different filter values", () => {
cy.mount(
<MultiComboBox noValidation={true} showSelectAll={true}>
<MultiComboBoxItem text="Argentina"></MultiComboBoxItem>
<MultiComboBoxItem text="Australia"></MultiComboBoxItem>
<MultiComboBoxItem text="Bulgaria"></MultiComboBoxItem>
<MultiComboBoxItem text="Belgium"></MultiComboBoxItem>
<MultiComboBoxItem text="Spain"></MultiComboBoxItem>
</MultiComboBox>
);

cy.get("[ui5-multi-combobox]")
.as("mcb")
.realClick();

// Type "a" to filter
cy.get("@mcb")
.shadow()
.find("#ui5-multi-combobox-input")
.as("input")
.realType("a");

cy.get("@mcb")
.shadow()
.find<ResponsivePopover>("ui5-responsive-popover")
.ui5ResponsivePopoverOpened();

// Click Select All to select filtered items
cy.get("@mcb")
.shadow()
.find<ResponsivePopover>("ui5-responsive-popover")
.find(".ui5-mcb-select-all-checkbox")
.realClick();

// Verify input value is still "a" after Select All
cy.get("@input")
.should("have.value", "a");

// Verify 2 items selected (Argentina, Australia)
cy.get("@mcb")
.shadow()
.find("[ui5-token]")
.should("have.length", 2);

// Clear input and type "s" to filter (popover stays open)
cy.get("@input")
.clear()
.realType("s");

// Click Select All for "s" filter (should select Spain)
cy.get("@mcb")
.shadow()
.find<ResponsivePopover>("ui5-responsive-popover")
.find(".ui5-mcb-select-all-checkbox")
.realClick();

// Verify input value is "s", not "a"
cy.get("@input")
.should("have.value", "s");

// Verify now 3 items are selected (Argentina, Australia, Spain)
cy.get("@mcb")
.shadow()
.find("[ui5-token]")
.should("have.length", 3);
});

@nikoletavnv nikoletavnv Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add some tests related to Select All when you have the n-more popover opened

it("Tokenizer expansion on dynamically added tokens", () => {
const addTokens = () => {
const mcb = document.getElementById("mcb");
Expand Down
Loading
Loading