diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx index cbea94de23ec..784e1edf0a21 100644 --- a/packages/main/cypress/specs/ComboBox.cy.tsx +++ b/packages/main/cypress/specs/ComboBox.cy.tsx @@ -2974,6 +2974,60 @@ describe("ComboBox Composition", () => { }); }); +describe("Loading State", () => { + it("should display busy indicator when loading is true", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-combobox]") + .shadow() + .find("ui5-responsive-popover") + .as("popover"); + + cy.get("@popover") + .find("ui5-busy-indicator") + .should("exist"); + + cy.get("@popover") + .find("ui5-list") + .should("not.exist"); + }); + + it("should hide busy indicator and show items when loading becomes false", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-combobox]") + .as("combo") + .shadow() + .find("ui5-responsive-popover") + .as("popover"); + + cy.get("@popover") + .find("ui5-busy-indicator") + .should("exist"); + + cy.get("@combo") + .invoke("prop", "loading", false); + + cy.get("@popover") + .find("ui5-busy-indicator") + .should("not.exist"); + + cy.get("@popover") + .find("ui5-list") + .should("exist"); + }); +}); + describe("Validation inside a form", () => { it("has correct validity for valueMissing", () => { cy.mount( diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx index f3ec04e0dda0..c64b42ceb8aa 100644 --- a/packages/main/cypress/specs/MultiComboBox.cy.tsx +++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx @@ -4442,6 +4442,60 @@ describe("MultiComboBox Composition", () => { }); }); +describe("Loading State", () => { + it("should display busy indicator when loading is true", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-multi-combobox]") + .shadow() + .find("ui5-responsive-popover") + .as("popover"); + + cy.get("@popover") + .find("ui5-busy-indicator") + .should("exist"); + + cy.get("@popover") + .find("ui5-list") + .should("not.exist"); + }); + + it("should hide busy indicator and show items when loading becomes false", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("mcb") + .shadow() + .find("ui5-responsive-popover") + .as("popover"); + + cy.get("@popover") + .find("ui5-busy-indicator") + .should("exist"); + + cy.get("@mcb") + .invoke("prop", "loading", false); + + cy.get("@popover") + .find("ui5-busy-indicator") + .should("not.exist"); + + cy.get("@popover") + .find("ui5-list") + .should("exist"); + }); +}); + describe("Validation inside a form", () => { it("has correct validity for valueMissing", () => { cy.mount( diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx index 77a483304361..378e70ca2f95 100644 --- a/packages/main/src/ComboBoxPopoverTemplate.tsx +++ b/packages/main/src/ComboBoxPopoverTemplate.tsx @@ -31,9 +31,11 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) { onKeyDown={this._handlePopoverKeydown} onFocusOut={this._handlePopoverFocusout} > - + {this.loading && + + } - {this._isPhone && + {!this.loading && this._isPhone && <>
@@ -79,7 +81,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
} - {!!this._filteredItems.length && + {!this.loading && !!this._filteredItems.length && @@ -31,7 +32,11 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { open={this.open} opener={this} > - {this._isPhone && <> + {this.loading && + + } + + {!this.loading && this._isPhone && <>
{this._headerTitleText} @@ -70,7 +75,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { {selectAllWrapper.call(this)} } - {!this._isPhone && <> + {!this.loading && !this._isPhone && <> {this.hasValueStateMessage &&
@@ -81,11 +86,11 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { {selectAllWrapper.call(this)} } - {this.filterSelected ? + {!this.loading && this.filterSelected ? {this.selectedItems.map(item => )} - : + : !this.loading && {this._filteredItems.map(item => )} diff --git a/packages/main/src/themes/MultiComboBoxPopover.css b/packages/main/src/themes/MultiComboBoxPopover.css index cea6ed902150..21115cc5c4a9 100644 --- a/packages/main/src/themes/MultiComboBoxPopover.css +++ b/packages/main/src/themes/MultiComboBoxPopover.css @@ -37,6 +37,23 @@ max-width: inherit; } +.ui5-multi-combobox-busy { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + z-index: 42; + display: flex; + justify-content: center; + align-items: center; + pointer-events: all; + width: 100%; +} + +.ui5-multi-combobox-busy:not([active]) { + display: none; +} + [ui5-responsive-popover] [ui5-input] { width: 100%; } diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index abf48ebbf21c..27cf28276793 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -192,6 +192,20 @@ SelectionChange call count: 0
+
+ Toggle Loading State + +
+
+ + + + + + + Toggle Loading +
+
Lazy Loading - example does not work on IE11 @@ -604,8 +618,13 @@

ComboBox Composition

document.getElementById("combo-focus").addEventListener("click", function () { document.getElementById("combo").focus(); }); + + document.getElementById("toggle-loading-btn").addEventListener("click", function () { + const combo = document.getElementById("toggle-loading-cb"); + combo.loading = !combo.loading; + }); - \ No newline at end of file + diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html index 20ddd9f28daa..082c29af7a2a 100644 --- a/packages/main/test/pages/MultiComboBox.html +++ b/packages/main/test/pages/MultiComboBox.html @@ -574,6 +574,21 @@

MultiComboBox in Compact

+
+ Toggle Loading State: +
+
+ + + + + + +

+ + Toggle Loading +
+
Placeholder test @@ -816,8 +831,13 @@

MultiComboBox in Compact

e.preventDefault(); document.getElementById("mcb-form-submit").textContent = ++submitCounter; }); + + document.getElementById("toggle-loading-btn").addEventListener("click", function () { + const mcb = document.getElementById("toggle-loading-mcb"); + mcb.loading = !mcb.loading; + }); - \ No newline at end of file +