diff --git a/packages/base/src/StaticAreaItem.js b/packages/base/src/StaticAreaItem.js index e8709f43c276..fcddbf6fbffc 100644 --- a/packages/base/src/StaticAreaItem.js +++ b/packages/base/src/StaticAreaItem.js @@ -1,4 +1,5 @@ import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js"; +import RenderScheduler from "./RenderScheduler.js"; /** * @class @@ -9,6 +10,11 @@ import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js"; class StaticAreaItem { constructor(_ui5ElementContext) { this.ui5ElementContext = _ui5ElementContext; + this._rendered = false; + } + + isRendered() { + return this._rendered; } /** @@ -26,6 +32,7 @@ class StaticAreaItem { this.staticAreaItemDomRef.classList.add(this.ui5ElementContext._id); // used for getting the popover in the tests getStaticAreaInstance().appendChild(this.staticAreaItemDomRef); + this._rendered = true; } this.ui5ElementContext.constructor.render(renderResult, this.staticAreaItemDomRef.shadowRoot, stylesToAdd, { eventContext: this.ui5ElementContext }); @@ -68,7 +75,11 @@ class StaticAreaItem { * @protected * Returns reference to the DOM element where the current fragment is added. */ - getDomRef() { + async getDomRef() { + if (!this._rendered || !this.staticAreaItemDomRef) { + this._updateFragment(); + } + await RenderScheduler.whenDOMUpdated(); // Wait for the content of the ui5-static-area-item to be rendered return this.staticAreaItemDomRef.shadowRoot; } } diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js index a5d66221e37a..1455fa89d7d2 100644 --- a/packages/base/src/UI5Element.js +++ b/packages/base/src/UI5Element.js @@ -95,7 +95,6 @@ class UI5Element extends HTMLElement { */ async connectedCallback() { const needsShadowDOM = this.constructor._needsShadowDOM(); - const needsStaticArea = this.constructor._needsStaticArea(); const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged(); // Render the Shadow DOM @@ -112,11 +111,6 @@ class UI5Element extends HTMLElement { this.onEnterDOM(); } } - - // Render Fragment if neccessary - if (needsStaticArea) { - this.staticAreaItem._updateFragment(this); - } } /** @@ -468,7 +462,7 @@ class UI5Element extends HTMLElement { this._upToDate = true; this._updateShadowRoot(); - if (this.constructor._needsStaticArea()) { + if (this._shouldUpdateFragment()) { this.staticAreaItem._updateFragment(this); } @@ -666,6 +660,10 @@ class UI5Element extends HTMLElement { return !!this.template; } + _shouldUpdateFragment() { + return this.constructor._needsStaticArea() && this.staticAreaItem.isRendered(); + } + /** * @private */ diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js index bf1b31e7caa3..18b2871f0105 100644 --- a/packages/fiori/src/ShellBar.js +++ b/packages/fiori/src/ShellBar.js @@ -368,10 +368,8 @@ class ShellBar extends UI5Element { this._actionList = { itemPress: event => { - const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover"); - if (!this._defaultItemPressPrevented) { - popover.close(); + this.overflowPopover.close(); } this._defaultItemPressPrevented = false; @@ -380,15 +378,13 @@ class ShellBar extends UI5Element { this._header = { press: event => { - const menuPopover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-menu-popover"); - if (this.menuItems.length) { this._menuPopoverItems = []; this.menuItems.forEach(item => { this._menuPopoverItems.push(item.textContent); }); this.updateStaticAreaItemContentDensity(); - menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button")); + this.menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button")); } }, }; @@ -442,8 +438,9 @@ class ShellBar extends UI5Element { left: 0, }; - this._handleResize = event => { - this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover").close(); + this._handleResize = async event => { + await this._getResponsivePopover(); + this.overflowPopover.close(); this._overflowActions(); }; } @@ -494,10 +491,8 @@ class ShellBar extends UI5Element { * @public */ closeOverflow() { - const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover"); - - if (popover) { - popover.close(); + if (this.overflowPopover) { + this.overflowPopover.close(); } } @@ -626,10 +621,9 @@ class ShellBar extends UI5Element { } _toggleActionPopover() { - const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover"); const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button"); this.updateStaticAreaItemContentDensity(); - popover.openBy(overflowButton); + this.overflowPopover.openBy(overflowButton); } _onkeydown(event) { @@ -819,6 +813,12 @@ class ShellBar extends UI5Element { } } + async _getResponsivePopover() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + this.overflowPopover = staticAreaItem.querySelector(".ui5-shellbar-overflow-popover"); + this.menuPopover = staticAreaItem.querySelector(".ui5-shellbar-menu-popover"); + } + get classes() { return { wrapper: { diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html index 1e000b4187c9..0adee626e306 100644 --- a/packages/fiori/test/pages/ShellBar.html +++ b/packages/fiori/test/pages/ShellBar.html @@ -225,7 +225,8 @@

ShellBar in Compact

}); ["disc", "call"].forEach(function(id) { - window[id].addEventListener("ui5-itemClick", function(event) { + var currenItem = window[id][0] || window[id]; + currenItem.addEventListener("ui5-itemClick", function(event) { event.preventDefault(); window["press-input"].value = event.target.id; window["custom-item-popover"].openBy(event.detail.targetRef); diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js index 329e29ace63c..b9da276a0573 100644 --- a/packages/main/src/ComboBox.js +++ b/packages/main/src/ComboBox.js @@ -298,8 +298,9 @@ class ComboBox extends UI5Element { this._initialRendering = false; } - onAfterRendering() { - if (isPhone() && this._respPopover.opened) { + async onAfterRendering() { + await this._respPopover(); + if (isPhone() && this.responsivePopover.opened) { // Set initial focus to the native input this.inner.focus(); } @@ -333,7 +334,7 @@ class ComboBox extends UI5Element { } _toggleRespPopover() { - if (this._respPopover.opened) { + if (this.responsivePopover.opened) { this._closeRespPopover(); } else { this._openRespPopover(); @@ -387,12 +388,12 @@ class ComboBox extends UI5Element { } _closeRespPopover() { - this._respPopover.close(); + this.responsivePopover.close(); } _openRespPopover() { this.updateStaticAreaItemContentDensity(); - this._respPopover.open(this); + this.responsivePopover.open(this); } _filterItems(str) { @@ -459,11 +460,13 @@ class ComboBox extends UI5Element { } get inner() { - return isPhone() ? this._respPopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]"); + return isPhone() ? this.responsivePopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]"); } - get _respPopover() { - return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover"); + async _respPopover() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover"); + return this.responsivePopover; } get editable() { diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index f5993582df74..4cfe962f1c82 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -282,7 +282,7 @@ class DatePicker extends UI5Element { allowTargetOverlap: true, stayOpenOnScroll: true, afterClose: () => { - const calendar = this._respPopover.querySelector(`#${this._id}-calendar`); + const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`); this._isPickerOpen = false; @@ -298,7 +298,7 @@ class DatePicker extends UI5Element { calendar._hideYearPicker(); }, afterOpen: () => { - const calendar = this._respPopover.querySelector(`#${this._id}-calendar`); + const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`); const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`); const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected"); @@ -424,7 +424,7 @@ class DatePicker extends UI5Element { _click(event) { if (isPhone()) { - this._respPopover.open(this); + this.responsivePopover.open(this); event.preventDefault(); // prevent immediate selection of any item } } @@ -566,8 +566,9 @@ class DatePicker extends UI5Element { return getRTL() ? "rtl" : "ltr"; } - get _respPopover() { - return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover"); + async _respPopover() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + return staticAreaItem.querySelector("ui5-responsive-popover"); } _canOpenPicker() { @@ -610,7 +611,7 @@ class DatePicker extends UI5Element { * @public */ closePicker() { - this._respPopover.close(); + this.responsivePopover.close(); } /** @@ -620,15 +621,16 @@ class DatePicker extends UI5Element { * Specify this option to focus the input field. * @public */ - openPicker(options) { + async openPicker(options) { + this._isPickerOpen = true; + this.responsivePopover = await this._respPopover(); this._changeCalendarSelection(); if (options && options.focusInput) { this._focusInputAfterOpen = true; } - this._respPopover.open(this); - this._isPickerOpen = true; + this.responsivePopover.open(this); } togglePicker() { diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index 87ae238d8dfb..b1e06c11de73 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -468,7 +468,7 @@ class Input extends UI5Element { _onfocusout(event) { // if focusout is triggered by pressing on suggestion item skip invalidation, because re-rendering // will happen before "itemPress" event, which will make item "active" state not visualized - if (this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot.contains(this.Suggestions._respPopover)) { + if (this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover)) { return; } diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 3c59ca6c1170..d358da94e5eb 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -336,11 +336,11 @@ class MultiComboBox extends UI5Element { } _closeMorePopover() { - this._getRespPopover(true).close(); + this.selectedItemsPopover.close(); } _closeAllItemsPopover() { - this._getRespPopover().close(); + this.allItemsPopover.close(); } get _inputDom() { @@ -389,10 +389,10 @@ class MultiComboBox extends UI5Element { if (!isPhone()) { if (filteredItems.length === 0) { - this._getRespPopover().close(); + this.allItemsPopover.close(); } else { this.updateStaticAreaItemContentDensity(); - this._getRespPopover().open(this); + this.allItemsPopover.open(this); } } @@ -427,17 +427,17 @@ class MultiComboBox extends UI5Element { this._keyDown = false; } - _onkeydown(event) { + async _onkeydown(event) { if (isShow(event) && !this.readonly && !this.disabled) { event.preventDefault(); this._toggleRespPopover(); } - if (isDown(event) && this._getRespPopover().opened && this.items.length) { + if (isDown(event) && this.allItemsPopover.opened && this.items.length) { event.preventDefault(); - const list = this.getStaticAreaItemDomRef().querySelector(".ui5-multi-combobox-all-items-list"); - list._itemNavigation.current = 0; - list.items[0].focus(); + await this._getList(); + this.list._itemNavigation.current = 0; + this.list.items[0].focus(); } if (isBackSpace(event) && event.target.value === "") { @@ -489,29 +489,33 @@ class MultiComboBox extends UI5Element { this.fireEvent("selectionChange", { items: this._getSelectedItems() }); if (!event.detail.selectionComponentPressed && !isSpace(event.detail)) { - this._getRespPopover().close(); + this.allItemsPopover.close(); this.value = ""; this.fireEvent("input"); } } - _getRespPopover(isMorePopover) { - return this.getStaticAreaItemDomRef().querySelector(`.ui5-multi-combobox-${isMorePopover ? "selected" : "all"}-items-responsive-popover`); + async _getRespPopover() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + this.selectedItemsPopover = staticAreaItem.querySelector(`.ui5-multi-combobox-selected-items-responsive-popover`); + this.allItemsPopover = staticAreaItem.querySelector(`.ui5-multi-combobox-all-items-responsive-popover`); } - _toggleRespPopover(isMorePopover) { - const popover = this._getRespPopover(isMorePopover); - const otherPopover = this._getRespPopover(!isMorePopover); + async _getList() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + this.list = staticAreaItem.querySelector(".ui5-multi-combobox-all-items-list"); + } + _toggleRespPopover(isMorePopover) { this.updateStaticAreaItemContentDensity(); - if (popover && popover.opened) { - return popover.close(); + if (this.allItemsPopover && this.allItemsPopover.opened) { + return this.allItemsPopover.close(); } - otherPopover && otherPopover.close(); + this.selectedItemsPopover && this.selectedItemsPopover.close(); - popover && popover.open(this); + this.allItemsPopover && this.allItemsPopover.open(this); } _focusin() { @@ -525,7 +529,7 @@ class MultiComboBox extends UI5Element { _click(event) { if (isPhone() && !this.readonly && !this._showMorePressed) { this.updateStaticAreaItemContentDensity(); - this._getRespPopover().open(this); + this.allItemsPopover.open(this); } this._showMorePressed = false; @@ -554,7 +558,7 @@ class MultiComboBox extends UI5Element { const hasSelectedItem = this.items.some(item => item.selected); if (this.getDomRef() && !hasSelectedItem) { - const morePopover = this._getRespPopover(true); + const morePopover = this.selectedItemsPopover; morePopover && morePopover.close(); } @@ -569,10 +573,11 @@ class MultiComboBox extends UI5Element { this._filteredItems = filteredItems; } - onAfterRendering() { - if (this.open && !this._getRespPopover().opened) { + async onAfterRendering() { + await this._getRespPopover(); + if (this.open && !this.allItemsPopover.opened) { this.updateStaticAreaItemContentDensity(); - this._getRespPopover().open(this); + this.allItemsPopover.open(this); // Set initial focus to the native input this._innerInput.focus(); } @@ -636,11 +641,11 @@ class MultiComboBox extends UI5Element { get _innerInput() { if (isPhone()) { - if (this._getRespPopover().opened) { - return this._getRespPopover().querySelector("input"); + if (this.allItemsPopover.opened) { + return this.allItemsPopover.querySelector("input"); } - return this._getRespPopover(true).querySelector("input"); + return this.selectedItemsPopover.querySelector("input"); } return this.getDomRef().querySelector("#ui5-multi-combobox-input"); diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index 426cd762faeb..4793b638fd44 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -219,11 +219,13 @@ class Select extends UI5Element { } get _isPickerOpen() { - return this._respPopover && this._respPopover.opened; + return this.responsivePopover && this.responsivePopover.opened; } - get _respPopover() { - return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover"); + async _respPopover() { + this._iconPressed = true; + const staticAreaItem = await this.getStaticAreaItemDomRef(); + return staticAreaItem.querySelector("ui5-responsive-popover"); } /** @@ -236,7 +238,8 @@ class Select extends UI5Element { return this.options.find(option => option.selected); } - _toggleRespPopover() { + async _toggleRespPopover() { + this.responsivePopover = await this._respPopover(); if (this.disabled) { return; } @@ -244,9 +247,9 @@ class Select extends UI5Element { this.updateStaticAreaItemContentDensity(); if (this._isPickerOpen) { - this._respPopover.close(); + this.responsivePopover.close(); } else { - this._respPopover.open(this); + this.responsivePopover.open(this); } } @@ -334,13 +337,11 @@ class Select extends UI5Element { } _applyFocusAfterOpen() { - this._toggleIcon(); - if (!this._currentlySelectedOption) { return; } - const li = this._respPopover.querySelector(`#${this._currentlySelectedOption._id}-li`); + const li = this.responsivePopover.querySelector(`#${this._currentlySelectedOption._id}-li`); li.parentElement._itemNavigation.currentIndex = this._selectedIndex; li && li.focus(); @@ -395,7 +396,7 @@ class Select extends UI5Element { } _afterClose() { - this._toggleIcon(); + this._iconPressed = false; if (this._escapePressed) { this._select(this._selectedIndexBeforeOpen); @@ -406,10 +407,6 @@ class Select extends UI5Element { } } - _toggleIcon() { - this._iconPressed = !this._iconPressed; - } - get _headerTitleText() { return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 820ea57a63ce..2a759cabea20 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -316,7 +316,7 @@ class TabContainer extends UI5Element { _onOverflowListItemSelect(event) { this._onItemSelect(event.detail.item); - this._respPopover.close(); + this.responsivePopover.close(); this.shadowRoot.querySelector(`#${event.detail.item.id}`).focus(); } @@ -354,9 +354,10 @@ class TabContainer extends UI5Element { }); } - _onOverflowButtonClick(event) { + async _onOverflowButtonClick(event) { + this.responsivePopover = await this._respPopover(); this.updateStaticAreaItemContentDensity(); - this._respPopover.open(event.target); + this.responsivePopover.open(this.getDomRef().querySelector(".ui-tc__overflowButton")); } _onHeaderBackArrowClick() { @@ -374,7 +375,7 @@ class TabContainer extends UI5Element { } _closeRespPopover() { - this._respPopover.close(); + this.responsivePopover.close(); } _updateScrolling() { @@ -397,8 +398,9 @@ class TabContainer extends UI5Element { return this.shadowRoot.querySelector(`#${this._id}-headerScrollContainer`); } - get _respPopover() { - return this.getStaticAreaItemDomRef().querySelector(`#${this._id}-overflowMenu`); + async _respPopover() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + return staticAreaItem.querySelector(`#${this._id}-overflowMenu`); } get classes() { diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js index 1f068c2aa2bd..0f7260772700 100644 --- a/packages/main/src/features/InputSuggestions.js +++ b/packages/main/src/features/InputSuggestions.js @@ -84,13 +84,15 @@ class Suggestions { } } - open() { + async open() { + this.responsivePopover = await this._respPopover(); this._beforeOpen(); - this._respPopover.open(this._getComponent()); + this.responsivePopover.open(this._getComponent()); } - close() { - this._respPopover.close(); + async close() { + this.responsivePopover = await this._respPopover(); + this.responsivePopover.close(); } updateSelectedItemPosition(pos) { @@ -126,8 +128,8 @@ class Suggestions { this._attachPopupListeners(); } - _attachItemsListeners() { - const list = this._getList(); + async _attachItemsListeners() { + const list = await this._getList(); list.removeEventListener("ui5-itemPress", this.fnOnSuggestionItemPress); list.addEventListener("ui5-itemPress", this.fnOnSuggestionItemPress); list.removeEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus); @@ -170,8 +172,7 @@ class Suggestions { } isOpened() { - const popover = this._respPopover; - return !!(popover && popover.opened); + return !!(this.responsivePopover && this.responsivePopover.opened); } _handleItemNavigation(forward) { @@ -245,32 +246,36 @@ class Suggestions { this._getScrollContainer().scrollTop = pos; } - _getScrollContainer() { + async _getScrollContainer() { if (!this._scrollContainer) { - this._scrollContainer = this._respPopover.getDomRef().querySelector(".ui5-popover-content"); + await this._respPopover(); + this._scrollContainer = this.responsivePopover.shadowRoot.querySelector(".ui5-popover-content"); } return this._scrollContainer; } _getItems() { - return [].slice.call(this._respPopover.querySelectorAll("ui5-li")); + return [].slice.call(this.responsivePopover.querySelectorAll("ui5-li")); } _getComponent() { return this.component; } - _getList() { - return this._getComponent().getStaticAreaItemDomRef().querySelector("ui5-responsive-popover").querySelector("ui5-list"); + async _getList() { + this.responsivePopover = await this._respPopover(); + return this.responsivePopover.querySelector("ui5-list"); } _getRealItems() { return this._getComponent().getSlottedNodes(this.slotName); } - get _respPopover() { - return this._getComponent().getStaticAreaItemDomRef().querySelector("ui5-responsive-popover"); + async _respPopover() { + const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef(); + this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover"); + return this.responsivePopover; } } diff --git a/packages/main/test/pages/Table-perf.html b/packages/main/test/pages/Table-perf.html index 9d7e7bf00c37..0a5b984d4087 100644 --- a/packages/main/test/pages/Table-perf.html +++ b/packages/main/test/pages/Table-perf.html @@ -53,10 +53,15 @@ [...Array(1000)].map(item => { const row = document.createElement("ui5-table-row"); - [...Array(5)].map(_ => { + [1,2,3,4,5].map(_ => { const cell = document.createElement("ui5-table-cell"); const span = document.createElement("span"); - span.innerText = "Hello World!"; + if (_ !== 1) { + span.innerText = "Hello World!"; + } else { + const datepicker = document.createElement("ui5-datepicker"); + span.appendChild(datepicker); + } cell.appendChild(span); row.appendChild(cell); diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js index ae4f05405ca5..658c9c501877 100644 --- a/packages/main/test/specs/Input.spec.js +++ b/packages/main/test/specs/Input.spec.js @@ -57,7 +57,7 @@ describe("Input general interaction", () => { it("Should open suggestions popover when focused", () => { const input = $("#myInput2"); - const staticAreaItemClassName = browser.getStaticAreaItemClassName("#myInput2") + const staticAreaItemClassName = browser.getStaticAreaItemClassName("#myInput2"); const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); // focus the input field which will display the suggestions diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js index 57a20d500cd9..236727f48c22 100644 --- a/packages/main/test/specs/Popover.spec.js +++ b/packages/main/test/specs/Popover.spec.js @@ -59,7 +59,7 @@ describe("Popover general interaction", () => { it("tests if overflown content can be reached by scrolling", () => { const manyItemsSelect = $("#many-items"); - const staticAreaItemClassName = browser.getStaticAreaItemClassName("#many-items") + const staticAreaItemClassName = browser.getStaticAreaItemClassName("#many-items"); const items = browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"); manyItemsSelect.click(); diff --git a/packages/tools/components-package/wdio.js b/packages/tools/components-package/wdio.js index c5f595e55c11..50557f3aa2ec 100644 --- a/packages/tools/components-package/wdio.js +++ b/packages/tools/components-package/wdio.js @@ -230,8 +230,9 @@ exports.config = { }, true); browser.addCommand("getStaticAreaItemClassName", function(selector) { - return browser.execute((selector) => { - return document.querySelector(selector).getStaticAreaItemDomRef().host.classList[0]; + return browser.execute(async (selector) => { + const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef(); + return staticAreaItem.host.classList[0]; }, selector); }, false); },