From 593023c6238ec3ac4773bb5a14ab4c030030502a Mon Sep 17 00:00:00 2001
From: Nikolay Deshev <nikolay.deshev@sap.com>
Date: Tue, 14 Jul 2026 22:37:33 +0300
Subject: [PATCH] fix(ui5-multi-combobox): toggle 'select all' checkbox
 correctly with grouped suggestions

fixes: #13712
---
 .../main/cypress/specs/MultiComboBox.cy.tsx   | 87 +++++++++++++++++++
 packages/main/src/MultiComboBox.ts            |  5 +-
 .../main/src/themes/MultiComboBoxPopover.css  | 22 +++--
 3 files changed, 106 insertions(+), 8 deletions(-)

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(
+			<MultiComboBox showSelectAll={true}>
+				<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")
+			.shadow()
+			.find(".inputIcon")
+			.realClick();
+
+		cy.get("@mcb")
+			.shadow()
+			.find<ResponsivePopover>("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(
+			<MultiComboBox 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")
+			.shadow()
+			.find(".inputIcon")
+			.realClick();
+
+		cy.get("@mcb")
+			.shadow()
+			.find<ResponsivePopover>("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) {