From 9f50bbc2439bde79d3d15508d0b499202a029e3d Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Fri, 12 Dec 2025 12:54:12 +0200 Subject: [PATCH 1/2] feat(ui5-multi-combobox): filtering selection enhancement --- .../cypress/specs/MultiComboBox.mobile.cy.tsx | 124 ++++++++++++++++++ packages/main/src/MultiComboBox.ts | 6 + .../main/src/MultiComboBoxPopoverTemplate.tsx | 1 + 3 files changed, 131 insertions(+) diff --git a/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx b/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx index 3de01e8e4f5b..67726bb4707d 100644 --- a/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx @@ -570,6 +570,130 @@ describe("Items selection", () => { .find("[ui5-responsive-popover]") .ui5ResponsivePopoverOpened(); }); + + it("Should disable the toggle button when there are no selected items", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-multi-combobox]") + .realClick(); + + cy.get("[ui5-multi-combobox]") + .shadow() + .find("[ui5-responsive-popover]") + .as("respPopover") + .ui5ResponsivePopoverOpened(); + + cy.get("@respPopover") + .find("[ui5-toggle-button]") + .should("have.attr", "disabled"); + }); + + it("Should enable the toggle button when there is selected item", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-multi-combobox]") + .realClick(); + + cy.get("[ui5-multi-combobox]") + .shadow() + .find("[ui5-responsive-popover]") + .as("respPopover") + .ui5ResponsivePopoverOpened(); + + cy.get("@respPopover") + .find("[ui5-toggle-button]") + .should("not.have.attr", "disabled"); + }); + + it("Should show only selected items on n-more click and toggle the button", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .shadow() + .find("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .realClick(); + + cy.get("[ui5-multi-combobox]") + .shadow() + .find("[ui5-responsive-popover]") + .as("respPopover") + .ui5ResponsivePopoverOpened(); + + cy.get("@respPopover") + .find("[ui5-toggle-button]") + .should("have.attr", "pressed"); + + cy.get("@respPopover") + .find("[ui5-list]") + .find("slot") + .should("have.length", 3); + }); + + it("Shows all items matching 'I' after clicking N-more and typing in the popover input", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .shadow() + .find("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .realClick(); + + cy.get("[ui5-multi-combobox]") + .shadow() + .find("[ui5-responsive-popover]") + .as("respPopover") + .ui5ResponsivePopoverOpened(); + + cy.get("@respPopover") + .find("[ui5-toggle-button]") + .should("have.attr", "pressed"); + + cy.get("@respPopover") + .find("[ui5-list]") + .find("slot") + .should("have.length", 2); + + cy.get("@respPopover") + .find("[ui5-input]") + .realClick() + .realType("I"); + + cy.get("@respPopover") + .find("[ui5-toggle-button]") + .should("not.have.attr", "pressed"); + + cy.get("@respPopover") + .find("[ui5-list]") + .find("slot") + .should("have.length", 4); + }); }); describe("Value state header", () => { diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 653cc1c761c8..797231f845dc 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -628,6 +628,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement { this._dialogInputValueState = this.valueState; } + if (this.filterSelected) { + this.filterSelected = false; + } + this.value = value; this._shouldFilterItems = true; this.valueBeforeAutoComplete = value; @@ -646,6 +650,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement { if (!isEnter(e)) { return; } + + console.log("here"); const { value } = (e.target as Input); const matchingItem = this._getItems().find(item => item.text === value); diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx index 52d4353fd133..af570b19acf2 100644 --- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx +++ b/packages/main/src/MultiComboBoxPopoverTemplate.tsx @@ -55,6 +55,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { icon={multiSelectAll} design="Transparent" pressed={this._showAllItemsButtonPressed} + disabled={this._getSelectedItems().length === 0} onClick={this.filterSelectedItems} accessibleName={this._showSelectedButtonAccessibleNameText} > From b6298e4d3a2bc38e8dac25b6173374f5a0cdb007 Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov <115184100+StefanDimitrov04@users.noreply.github.com> Date: Fri, 12 Dec 2025 13:00:51 +0200 Subject: [PATCH 2/2] Remove debug log from MultiComboBox Remove console log statement from key event handler. --- packages/main/src/MultiComboBox.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 797231f845dc..8f4974abd0c5 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -651,7 +651,6 @@ class MultiComboBox extends UI5Element implements IFormInputElement { return; } - console.log("here"); const { value } = (e.target as Input); const matchingItem = this._getItems().find(item => item.text === value);