From cc2654dc93557d113aad40c2c375aa7ce3c6bebe Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Wed, 24 Jun 2026 09:02:57 +0300 Subject: [PATCH 1/5] fix(ui5-multi-combobox): correct Select All with grouped items and n-more mode --- .../main/cypress/specs/MultiComboBox.cy.tsx | 134 +++++++++++++++++ packages/main/src/MultiComboBox.ts | 142 ++++++++++++++++-- .../main/src/MultiComboBoxPopoverTemplate.tsx | 2 +- .../main/src/themes/MultiComboBoxPopover.css | 9 +- 4 files changed, 267 insertions(+), 20 deletions(-) diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx index ae9197edbed4..57bb41f3f7c9 100644 --- a/packages/main/cypress/specs/MultiComboBox.cy.tsx +++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx @@ -704,6 +704,140 @@ describe("General", () => { })); }); + it("Select All checkbox state with grouped items", () => { + cy.mount( + + + + + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("mcb") + .realClick(); + + cy.get("@mcb") + .shadow() + .find(".inputIcon") + .realClick(); + + cy.get("@mcb") + .shadow() + .find("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( + + + + + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("mcb") + .realClick(); + + cy.get("@mcb") + .shadow() + .find(".inputIcon") + .realClick(); + + cy.get("@mcb") + .shadow() + .find("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( + + + + + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("mcb") + .realClick(); + + cy.get("@mcb") + .shadow() + .find(".inputIcon") + .realClick(); + + cy.get("@mcb") + .shadow() + .find("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("Tokenizer expansion on dynamically added tokens", () => { const addTokens = () => { const mcb = document.getElementById("mcb"); diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 534eeb34c311..841cf48cfd38 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -733,14 +733,20 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this._showMorePressed = true; this._tokenizer._scrollToEndOnExpand = true; + this._applySelectedItemsFilter(); + this._toggleTokenizerPopover(); } filterSelectedItems(e: UI5CustomEvent) { this.filterSelected = (e.target as ToggleButton).pressed; - const selectedItems = this._filteredItems.filter(item => item.selected); - this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1); + if (this.filterSelected) { + this._applySelectedItemsFilter(); + } else { + // Reset to show all items + this._updateItemsVisibility(); + } } get _showAllItemsButtonPressed(): boolean { @@ -1199,7 +1205,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this.filterSelected = false; } else { this._previouslySelectedItems = this._getSelectedItems(); - this.selectedItems?.filter(item => !item.isGroupItem).forEach(item => { + // In n-more mode, use _filteredItems instead of selectedItems + this._filteredItems?.filter(item => !item.isGroupItem).forEach(item => { item.selected = (e.target as CheckBox).checked; }); @@ -1212,6 +1219,11 @@ class MultiComboBox extends UI5Element implements IFormInputElement { if (changePrevented) { this._revertSelection(); } + + // In n-more mode, update Select All checkbox state after selection changes + if (this.filterSelected) { + this._updateGroupsVisibility(); + } } } @@ -1630,6 +1642,71 @@ class MultiComboBox extends UI5Element implements IFormInputElement { .filter((v): v is string => !!v); } + /** + * Filters items to show only selected items and their group headers, + * and updates the _isVisible property accordingly. + * Used in n-more mode. + * @private + */ + _applySelectedItemsFilter() { + const allItems = this._getItems(); + + // Set _isVisible for all items based on selection + allItems.forEach(item => { + if (isInstanceOfMultiComboBoxItem(item)) { + item._isVisible = item.selected; + } + }); + + // Hide unselected items and empty groups using CSS + allItems.forEach(item => { + const shouldBeVisible = item.isGroupItem ? item._isVisible : item.selected; + (item as HTMLElement).style.display = shouldBeVisible ? "" : "none"; + }); + + // Filter to only include selected items and non-empty groups + const filtered = allItems.filter(item => { + if (item.isGroupItem) { + return item._isVisible; // Group's _isVisible getter checks if any children are visible + } + return item.selected; + }); + + this._filteredItems = [...filtered]; + } + + /** + * Updates the _isVisible property for all items. + * If visibleItems is provided, only those items will be visible. + * If not provided, all items will be visible. + * @private + */ + _updateItemsVisibility(visibleItems?: IMultiComboBoxItem[]) { + this._getItems().forEach(item => { + if (isInstanceOfMultiComboBoxItem(item)) { + item._isVisible = visibleItems ? visibleItems.includes(item) : true; + } + // Reset display style + (item as HTMLElement).style.display = ""; + }); + } + + /** + * Updates Select All checkbox state in n-more mode. + * Items and groups stay visible - they're only filtered on reopen. + * Used when selections change while the n-more popup is open. + * @private + */ + _updateGroupsVisibility() { + // In n-more mode, when selections change, we only update the Select All checkbox state + // We DON'T hide items or groups - they stay visible until popup closes and reopens + + // Recalculate Select All checkbox state based on currently visible items + const visibleSelectableItems = this._filteredItems.filter(item => !item.isGroupItem); + const selectedVisibleItems = visibleSelectableItems.filter(item => item.selected); + this._allSelected = selectedVisibleItems.length > 0 && selectedVisibleItems.length === visibleSelectableItems.length; + } + _listSelectionChange(e: CustomEvent) { let changePrevented; @@ -1649,6 +1726,11 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this.selectedValues = this._getSelectedValues(); } + // In n-more mode, update Select All checkbox state when selections change + if (this.filterSelected) { + this._updateGroupsVisibility(); + } + // don't call selection change right after selection as user can cancel it on phone if (!isPhone()) { changePrevented = this.fireSelectionChange(); @@ -1740,6 +1822,9 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this._iconPressed = false; this._preventTokenizerToggle = false; this.filterSelected = false; + + // Reset _isVisible for all items when closing + this._updateItemsVisibility(); } _beforeOpen() { @@ -1758,8 +1843,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this._innerInput.value = this.value; if (this.filterSelected) { - const selectedItems = this._filteredItems.filter(item => item.selected); - this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1); + this._applySelectedItemsFilter(); } } @@ -1861,16 +1945,28 @@ class MultiComboBox extends UI5Element implements IFormInputElement { const value = input && input.value; 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)); + // When in n-more mode, Select All is checked only if ALL visible items are selected + // In normal mode, Select All is checked only if ALL selectable items are selected + if (this.filterSelected) { + const visibleSelectableItems = this._filteredItems.filter(item => !item.isGroupItem); + const selectedVisibleItems = visibleSelectableItems.filter(item => item.selected); + this._allSelected = selectedVisibleItems.length > 0 && selectedVisibleItems.length === visibleSelectableItems.length; + } else { + // Normal mode: Select All is checked only if ALL selectable items are selected + const selectableItems = this._getItems().filter(item => !item.isGroupItem && item._isVisible); + const selectedCount = selectableItems.filter(item => item.selected).length; + this._allSelected = selectedCount > 0 && selectedCount === selectableItems.length; + } } this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled); if (input && !input.value) { this.valueBeforeAutoComplete = ""; - this._filteredItems = this._getItems(); + // Don't reset _filteredItems in n-more mode - it's controlled by _applySelectedItemsFilter + if (!this.filterSelected) { + this._filteredItems = this._getItems(); + } } if (this.selectedValues) { @@ -1881,9 +1977,13 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`); if (!input || !value) { + // Don't reset visibility in n-more mode - it's controlled by _beforeOpen and _showFilteredItems + if (!this.filterSelected) { + this._updateItemsVisibility(); + } + // Update readonly state for all items this._getItems().forEach(item => { if (isInstanceOfMultiComboBoxItem(item)) { - item._isVisible = true; item._readonly = this.readonly; } }); @@ -1902,10 +2002,13 @@ class MultiComboBox extends UI5Element implements IFormInputElement { } } - if (this._shouldFilterItems) { - this._filteredItems = this._filterItems(autoCompletedChars ? this.valueBeforeAutoComplete : value); - } else { - this._filteredItems = this._getItems(); + // Don't reset _filteredItems in n-more mode - it's controlled by _applySelectedItemsFilter + if (!this.filterSelected) { + if (this._shouldFilterItems) { + this._filteredItems = this._filterItems(autoCompletedChars ? this.valueBeforeAutoComplete : value); + } else { + this._filteredItems = this._getItems(); + } } } @@ -2341,7 +2444,16 @@ class MultiComboBox extends UI5Element implements IFormInputElement { } get selectAllCheckboxLabel() { - const items = this._getItems().filter(item => !item.isGroupItem); + // In n-more mode, show count of selected vs. total visible items + // In normal mode, show selected vs. total count + if (this.filterSelected) { + const visibleItems = this._filteredItems.filter(item => !item.isGroupItem); + const selectedCount = visibleItems.filter(item => item.selected).length; + return MultiComboBox.i18nBundle.getText(MCB_SELECTED_ITEMS, selectedCount, visibleItems.length); + } + + // Normal mode: count only visible items + const items = this._getItems().filter(item => !item.isGroupItem && item._isVisible); const selected = items.filter(item => item.selected); return MultiComboBox.i18nBundle.getText(MCB_SELECTED_ITEMS, selected.length, items.length); diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx index 0393b075a1f3..3d5a51a7c931 100644 --- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx +++ b/packages/main/src/MultiComboBoxPopoverTemplate.tsx @@ -95,7 +95,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { {!this.loading && this.filterSelected ? - {this.selectedItems.map(item => )} + {this._filteredItems.map(item => )} : !this.loading && diff --git a/packages/main/src/themes/MultiComboBoxPopover.css b/packages/main/src/themes/MultiComboBoxPopover.css index 21115cc5c4a9..9ce322eeaf3b 100644 --- a/packages/main/src/themes/MultiComboBoxPopover.css +++ b/packages/main/src/themes/MultiComboBoxPopover.css @@ -16,13 +16,14 @@ font-family: var(--sapFontBoldFamily); } +.ui5-mcb-select-all-checkbox::part(root) { + width: 100%; +} + .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; + inset: 0 2px; } .ui5-mcb-select-all-checkbox::part(label) { From a0a0a0cedfc44d91bfca9f038ae0bac6953ed3da Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Tue, 30 Jun 2026 16:34:13 +0300 Subject: [PATCH 2/5] fix(ui5-multi-combobox): correct Select All with grouped items and n-more popover --- packages/main/src/MultiComboBox.ts | 54 +++++++++++++++++-- .../main/src/themes/MultiComboBoxPopover.css | 2 +- 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 841cf48cfd38..0f3f0b22ceac 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -800,6 +800,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement { } this.value = input.value; + // Update valueBeforeAutoComplete with the user's typed value (not typeahead completion) + this.valueBeforeAutoComplete = input.value; this._filteredItems = filteredItems; if (!isPhone()) { @@ -1160,6 +1162,14 @@ class MultiComboBox extends UI5Element implements IFormInputElement { const allItemsSelected = filteredItems.every(item => item.selected); this._previouslySelectedItems = filteredItems.filter(item => item.selected).map(item => item); + // Use valueBeforeAutoComplete to get the actual typed text (not typeahead completion) + // Fall back to reading from the DOM input if valueBeforeAutoComplete is not set + const filterValue = this.valueBeforeAutoComplete || this._innerInput?.value || ""; + + // Disable autocomplete to prevent typeahead from changing the filter value + const previousShouldAutocomplete = this._shouldAutocomplete; + this._shouldAutocomplete = false; + filteredItems.forEach(item => { item.selected = !allItemsSelected; }); @@ -1169,6 +1179,19 @@ class MultiComboBox extends UI5Element implements IFormInputElement { if (changePrevented) { this._revertSelection(); } + + // Preserve the filter value (same as _listSelectionChange does for checkbox clicks) + this.value = filterValue; + this.valueBeforeAutoComplete = filterValue; + + if (this._innerInput) { + this._innerInput.value = filterValue; + } + + // Restore autocomplete on next tick to allow normal typing + setTimeout(() => { + this._shouldAutocomplete = previousShouldAutocomplete; + }, 0); } _onListHeaderKeydown(e: KeyboardEvent) { @@ -1823,11 +1846,22 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this._preventTokenizerToggle = false; this.filterSelected = false; + // Only reset filter state if there's no input value and no saved filter value + // Keep _shouldFilterItems = true if we have a filter value stored + if (!this._innerInput?.value && !this.valueBeforeAutoComplete && !this.value) { + this._shouldFilterItems = false; + } + // Reset _isVisible for all items when closing this._updateItemsVisibility(); } _beforeOpen() { + // If reopening with a stored filter value, restore it + if (this._shouldFilterItems === true && this.valueBeforeAutoComplete && !this.value) { + this.value = this.valueBeforeAutoComplete; + } + this.open = true; this._itemsBeforeOpen = this._getItems().map(item => { return { @@ -1962,7 +1996,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled); if (input && !input.value) { - this.valueBeforeAutoComplete = ""; + // Don't clear valueBeforeAutoComplete if filtering is active + if (this._shouldFilterItems !== true) { + this.valueBeforeAutoComplete = ""; + } // Don't reset _filteredItems in n-more mode - it's controlled by _applySelectedItemsFilter if (!this.filterSelected) { this._filteredItems = this._getItems(); @@ -1977,8 +2014,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`); if (!input || !value) { - // Don't reset visibility in n-more mode - it's controlled by _beforeOpen and _showFilteredItems - if (!this.filterSelected) { + // Don't reset visibility if: + // - In n-more mode (controlled by _beforeOpen and _showFilteredItems) + // - Filtering is active (preserve filtered state even if popup briefly closes) + if (!this.filterSelected && this._shouldFilterItems !== true) { this._updateItemsVisibility(); } // Update readonly state for all items @@ -2144,7 +2183,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement { token.selected = false; }); - this.valueBeforeAutoComplete = ""; + // Don't clear valueBeforeAutoComplete if filtering is active + if (this._shouldFilterItems !== true) { + this.valueBeforeAutoComplete = ""; + } } inputFocusOut(e: FocusEvent) { @@ -2165,6 +2207,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement { if (!this.noValidation && this.value) { this.value = ""; this._lastValue = ""; + // Also clear the DOM input to prevent typeahead from running on old value + if (this._innerInput) { + this._innerInput.value = ""; + } if (this.valueState === ValueState.Negative && this._effectiveValueState !== ValueState.Negative) { this._updateValueState(this._effectiveValueState); } diff --git a/packages/main/src/themes/MultiComboBoxPopover.css b/packages/main/src/themes/MultiComboBoxPopover.css index 9ce322eeaf3b..30f0af857b2b 100644 --- a/packages/main/src/themes/MultiComboBoxPopover.css +++ b/packages/main/src/themes/MultiComboBoxPopover.css @@ -23,7 +23,7 @@ .ui5-mcb-select-all-checkbox::part(root):focus::before { border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); border-radius: 0; - inset: 0 2px; + inset: .125rem; } .ui5-mcb-select-all-checkbox::part(label) { From fdcc000d8bdaad2bfe29be5e075798b01c77f739 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Tue, 30 Jun 2026 17:32:54 +0300 Subject: [PATCH 3/5] fix(ui5-multi-combobox): correct Select All with grouped items and n-more popover --- packages/main/src/MultiComboBox.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 0f3f0b22ceac..19148b4bd038 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -2204,7 +2204,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement { if ((!this.shadowRoot!.contains(e.relatedTarget as Node) || focusIsGoingInPopover) && !this._deleting && !this._clearingValue) { this.focused = false; - if (!this.noValidation && this.value) { + // Don't clear value if focus is going to popover (e.g., value state message) + if (!this.noValidation && this.value && !focusIsGoingInPopover) { this.value = ""; this._lastValue = ""; // Also clear the DOM input to prevent typeahead from running on old value From 7e1ca023c1d84f15b6c420e14cafe7ddb1f3acb7 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Tue, 30 Jun 2026 17:51:15 +0300 Subject: [PATCH 4/5] fix(ui5-multi-combobox): correct Select All with grouped items and n-more popover --- .../main/cypress/specs/MultiComboBox.cy.tsx | 115 ++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx index 57bb41f3f7c9..e66d21d0fabf 100644 --- a/packages/main/cypress/specs/MultiComboBox.cy.tsx +++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx @@ -838,6 +838,121 @@ describe("General", () => { .should("have.attr", "checked"); }); + it("Select All preserves filter value when filtering", () => { + cy.mount( + + + + + + + ); + + 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("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( + + + + + + + + ); + + 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("ui5-responsive-popover") + .ui5ResponsivePopoverOpened(); + + // Click Select All to select filtered items + cy.get("@mcb") + .shadow() + .find("ui5-responsive-popover") + .find(".ui5-mcb-select-all-checkbox") + .realClick(); + + // Close popover + cy.get("@mcb") + .shadow() + .find(".inputIcon") + .realClick(); + + cy.get("@mcb") + .shadow() + .find("ui5-responsive-popover") + .ui5ResponsivePopoverClosed(); + + // Reopen and type "s" to filter + cy.get("@mcb") + .realClick(); + + cy.get("@input") + .clear() + .realType("s"); + + // Wait for popover to reopen with new filter + cy.get("@mcb") + .shadow() + .find("ui5-responsive-popover") + .ui5ResponsivePopoverOpened(); + + // Click Select All for "s" filter + cy.get("@mcb") + .shadow() + .find("ui5-responsive-popover") + .find(".ui5-mcb-select-all-checkbox") + .realClick(); + + // Verify input value is "s", not "a" + cy.get("@input") + .should("have.value", "s"); + }); + it("Tokenizer expansion on dynamically added tokens", () => { const addTokens = () => { const mcb = document.getElementById("mcb"); From f1b3fbb319b2e2eaaa2f9f54cf81d46877d1d0cd Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Tue, 30 Jun 2026 21:34:02 +0300 Subject: [PATCH 5/5] fix(ui5-multi-combobox): correct Select All with grouped items and n-more popover --- .../main/cypress/specs/MultiComboBox.cy.tsx | 32 ++++++++----------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx index e66d21d0fabf..b565c4dcc524 100644 --- a/packages/main/cypress/specs/MultiComboBox.cy.tsx +++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx @@ -916,32 +916,22 @@ describe("General", () => { .find(".ui5-mcb-select-all-checkbox") .realClick(); - // Close popover - cy.get("@mcb") - .shadow() - .find(".inputIcon") - .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-responsive-popover") - .ui5ResponsivePopoverClosed(); - - // Reopen and type "s" to filter - cy.get("@mcb") - .realClick(); + .find("[ui5-token]") + .should("have.length", 2); + // Clear input and type "s" to filter (popover stays open) cy.get("@input") .clear() .realType("s"); - // Wait for popover to reopen with new filter - cy.get("@mcb") - .shadow() - .find("ui5-responsive-popover") - .ui5ResponsivePopoverOpened(); - - // Click Select All for "s" filter + // Click Select All for "s" filter (should select Spain) cy.get("@mcb") .shadow() .find("ui5-responsive-popover") @@ -951,6 +941,12 @@ describe("General", () => { // 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); }); it("Tokenizer expansion on dynamically added tokens", () => {