diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx
index 273b523ca49c8..64d7bbc93e836 100644
--- a/packages/main/cypress/specs/MultiComboBox.cy.tsx
+++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx
@@ -5503,3 +5503,90 @@ describe("MultiComboBoxItemCustom - Mixed Selection", () => {
cy.get("@multiCombobox").shadow().find("[ui5-token]").should("have.length", 2);
});
});
+
+describe("Select All with Groups", () => {
+ it("should check the 'select all' checkbox when all items in groups are selected", () => {
+ cy.mount(
+
+
+
+
+
+
+
+
+
+
+ );
+
+ cy.get("[ui5-multi-combobox]")
+ .as("mcb")
+ .shadow()
+ .find(".inputIcon")
+ .realClick();
+
+ cy.get("@mcb")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .as("popover")
+ .ui5ResponsivePopoverOpened();
+
+ cy.get("@popover")
+ .find(".ui5-mcb-select-all-checkbox")
+ .as("selectAllCheckbox")
+ .should("not.have.attr", "checked");
+
+ cy.get("@selectAllCheckbox")
+ .realClick();
+
+ cy.get("@selectAllCheckbox")
+ .should("have.attr", "checked");
+
+ cy.get("@mcb")
+ .shadow()
+ .find("[ui5-tokenizer]")
+ .find("[ui5-token]")
+ .should("have.length", 4);
+ });
+
+ it("should uncheck the 'select all' checkbox when deselecting one item in a group", () => {
+ cy.mount(
+
+
+
+
+
+
+
+
+
+
+ );
+
+ cy.get("[ui5-multi-combobox]")
+ .as("mcb")
+ .shadow()
+ .find(".inputIcon")
+ .realClick();
+
+ cy.get("@mcb")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .as("popover")
+ .ui5ResponsivePopoverOpened();
+
+ cy.get("@popover")
+ .find(".ui5-mcb-select-all-checkbox")
+ .as("selectAllCheckbox")
+ .should("have.attr", "checked");
+
+ cy.get("[ui5-mcb-item]")
+ .first()
+ .shadow()
+ .find("[ui5-checkbox]")
+ .realClick();
+
+ cy.get("@selectAllCheckbox")
+ .should("not.have.attr", "checked");
+ });
+});
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 534eeb34c3117..a2f57298d48de 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -1862,8 +1862,9 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
if (this.open) {
const list = this._getList();
- const selectedListItemsCount = this.items.filter(item => item.selected).length;
- this._allSelected = selectedListItemsCount > 0 && ((selectedListItemsCount === this.items.length) || (list?.getSlottedNodes("items").length === selectedListItemsCount));
+ const selectableItems = this._getItems().filter(item => !item.isGroupItem);
+ const selectedListItemsCount = selectableItems.filter(item => item.selected).length;
+ this._allSelected = selectedListItemsCount > 0 && ((selectedListItemsCount === selectableItems.length) || (list?.getSlottedNodes("items").length === selectedListItemsCount));
}
this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
diff --git a/packages/main/src/themes/MultiComboBoxPopover.css b/packages/main/src/themes/MultiComboBoxPopover.css
index 21115cc5c4a95..0dc11475e555b 100644
--- a/packages/main/src/themes/MultiComboBoxPopover.css
+++ b/packages/main/src/themes/MultiComboBoxPopover.css
@@ -9,6 +9,21 @@
top: 0;
z-index: 2;
background: var(--sapPageHeader_Background);
+ box-sizing: border-box;
+}
+
+.ui5-mcb-select-all-header:focus,
+.ui5-mcb-select-all-header:focus-within {
+ outline: none;
+}
+
+.ui5-mcb-select-all-header:focus::after,
+.ui5-mcb-select-all-header:focus-within::after {
+ content: "";
+ position: absolute;
+ inset: 2px;
+ border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+ pointer-events: none;
}
.ui5-mcb-select-all-checkbox {
@@ -17,12 +32,7 @@
}
.ui5-mcb-select-all-checkbox::part(root):focus::before {
- border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
- border-radius: 0;
- right: 2px;
- left: 2px;
- bottom: 0;
- top: 0;
+ display: none;
}
.ui5-mcb-select-all-checkbox::part(label) {