diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index 3e3df221f59e..c25902c4db36 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -251,11 +251,13 @@ class Suggestions { return sc.offsetHeight < sc.scrollHeight; } - open() { + async open() { this._getComponent().open = true; this._beforeOpen(); - this.responsivePopover!.showAt(this._getComponent()); + this.responsivePopover = await this._getSuggestionPopover(); + + this.responsivePopover.showAt(this._getComponent()); } async close(preventFocusRestore = false) { @@ -263,7 +265,7 @@ class Suggestions { this._getComponent().open = false; this.responsivePopover = await this._getSuggestionPopover(); - this.responsivePopover.close(false, false, preventFocusRestore); + this.responsivePopover?.close(false, false, preventFocusRestore); if (selectedItem && selectedItem.focused) { selectedItem.focused = false; @@ -344,14 +346,14 @@ class Suggestions { async _attachItemsListeners() { const list = await this._getList(); - list.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener); - list.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener); - list.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener); - list.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener); - list.removeEventListener("mouseover", this.fnOnSuggestionItemMouseOver); - list.addEventListener("mouseover", this.fnOnSuggestionItemMouseOver); - list.removeEventListener("mouseout", this.fnOnSuggestionItemMouseOut); - list.addEventListener("mouseout", this.fnOnSuggestionItemMouseOut); + list?.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener); + list?.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener); + list?.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener); + list?.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener); + list?.removeEventListener("mouseover", this.fnOnSuggestionItemMouseOver); + list?.addEventListener("mouseover", this.fnOnSuggestionItemMouseOver); + list?.removeEventListener("mouseout", this.fnOnSuggestionItemMouseOut); + list?.addEventListener("mouseout", this.fnOnSuggestionItemMouseOut); } _attachPopupListeners() { @@ -575,12 +577,12 @@ class Suggestions { async _getList() { this.responsivePopover = await this._getSuggestionPopover(); - return this.responsivePopover.querySelector("[ui5-list]")!; + return this.responsivePopover?.querySelector("[ui5-list]"); } async _getListWidth() { const list = await this._getList(); - return list.offsetWidth; + return list?.offsetWidth; } _getRealItems() { @@ -588,10 +590,6 @@ class Suggestions { } async _getSuggestionPopover() { - if (this.responsivePopover) { - return this.responsivePopover; - } - const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef(); this.responsivePopover = staticAreaItem!.querySelector("[ui5-responsive-popover]")!; return this.responsivePopover; diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html index 85d43bf11b06..6f213800cf08 100644 --- a/packages/main/test/pages/Input.html +++ b/packages/main/test/pages/Input.html @@ -421,6 +421,8 @@

Inputs with clear icon

+ + Toggle show-suggestions
@@ -788,6 +790,11 @@

Input - change event handling

const inputNumber3ChangeCount = document.getElementById("input-number3-change-count"); inputNumber3ChangeCount.value = (parseInt(inputNumber3ChangeCount.value) + 1).toString(); }); + + document.getElementById("toggle-suggestions").addEventListener("click", () => { + const input = document.getElementById("clear-input-suggestions"); + input.toggleAttribute("show-suggestions"); + }); diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js index 26ba50cbeaef..8c10c75f7d3f 100644 --- a/packages/main/test/specs/Input.spec.js +++ b/packages/main/test/specs/Input.spec.js @@ -1154,6 +1154,24 @@ describe("Input general interaction", () => { assert.strictEqual(await input.getValue(), "Test", "The value is not cleared"); }); + + it("Tests if toggling of show-suggestions attribute works correctly", async () => { + const input = await $("#clear-input-suggestions"); + const button = await $("#toggle-suggestions"); + + await button.click(); + await button.click(); + + await input.click(); + await input.keys("a"); + + // check if popup is open + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#clear-input-suggestions"); + const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); + + // popover should be open + assert.ok(await popover.isDisplayedInViewport(), "The popover is visible"); + }); }); describe("Input arrow navigation", () => {