@ui5/webcomponents 2.0.0-rc.5 → 2.0.0-rc.6

package/dist/ComboBox.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var ComboBox_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -46,7 +45,7 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import ComboBoxItemGroup, { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
 import ListItemGroup from "./ListItemGroup.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
@@ -126,8 +125,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._selectedItemText = "";
         this._userTypedValue = "";
     }
-    async onBeforeRendering() {
-        const popover = this.valueStatePopover;
+    onBeforeRendering() {
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         if (this._initialRendering || this.filter === "None") {
             this._filteredItems = this.items;
@@ -142,16 +140,15 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this.items.forEach(this._makeAllVisible.bind(this));
             this._filteredItems = this.items;
         }
-        if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length && popover) {
-            popover.open = false;
+        if (this.shouldOpenValueStateMessagePopover) {
+            this.valueStateOpen = true;
+        }
+        else {
+            this.valueStateOpen = false;
         }
         this._selectMatchingItem();
         this._initialRendering = false;
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
-        const suggestionsPopover = await this._getPicker();
-        this.items.forEach(item => {
-            item._getRealDomRef = () => suggestionsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
-        });
     }
     get iconsCount() {
         const slottedIconsCount = this.icon?.length || 0;
@@ -159,24 +156,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         const arrowDownIconsCount = this.readonly ? 0 : 1;
         return slottedIconsCount + clearIconCount + arrowDownIconsCount;
     }
-    async onAfterRendering() {
-        const picker = await this._getPicker();
-        if ((await this.shouldClosePopover()) && !isPhone()) {
-            picker.preventFocusRestore = true;
-            picker.open = false;
-            this._clearFocus();
-            this._itemFocused = false;
-        }
-        this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
-        this.storeResponsivePopoverWidth();
-        if (isPhone()) {
+    onAfterRendering() {
+        if (this.inner && this.value !== this.inner.value) {
             this.value = this.inner.value;
-            this._selectMatchingItem();
         }
-    }
-    async shouldClosePopover() {
-        const popover = await this._getPicker();
-        return popover.open && !this.focused && !this._itemFocused && !this._isValueStateFocused;
+        this.storeResponsivePopoverWidth();
+        this.items.forEach(item => {
+            item._getRealDomRef = () => this._getPicker().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+        });
     }
     _focusin(e) {
         this.focused = true;
@@ -185,21 +172,25 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _focusout(e) {
         const toBeFocused = e.relatedTarget;
-        const focusedOutToValueStateMessage = toBeFocused?.shadowRoot?.querySelector(".ui5-valuestatemessage-root");
         const clearIconWrapper = this.shadowRoot.querySelector(".ui5-input-clear-icon-wrapper");
         const focusedOutToClearIcon = clearIconWrapper === toBeFocused || clearIconWrapper?.contains(toBeFocused);
         if (this._effectiveShowClearIcon && focusedOutToClearIcon) {
             return;
         }
         this._fireChangeEvent();
-        if (focusedOutToValueStateMessage) {
+        const focusedOutToItemsPicker = this.open && this._getPicker().contains(toBeFocused);
+        const focusedOutToValueState = this.valueStateOpen && this._getValueStatePopover().contains(toBeFocused);
+        if (focusedOutToItemsPicker || focusedOutToValueState) {
             e.stopImmediatePropagation();
             return;
         }
-        const popover = this.shadowRoot.querySelector("[ui5-responsive-popover]");
-        if (!(this.getDomRef().contains(toBeFocused)) && (popover !== e.relatedTarget)) {
+        if (!(this.getDomRef().contains(toBeFocused)) && (this._getPicker() !== e.relatedTarget)) {
             this.focused = false;
-            !isPhone() && this._closeRespPopover(e);
+        }
+    }
+    _beforeOpenPopover() {
+        if (isPhone()) {
+            this._getPickerInput().value = this.value;
         }
     }
     _afterOpenPopover() {
@@ -210,6 +201,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._iconPressed = false;
         this._filteredItems = this.items;
         this.filterValue = "";
+        this._selectedItemText = "";
         // close device's keyboard and prevent further typing
         if (isPhone()) {
             this.blur();
@@ -218,49 +210,32 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this._lastValue = this.value;
             this._selectionPerformed = false;
         }
+        this.open = false;
     }
-    async _toggleRespPopover() {
-        const picker = await this._getPicker();
-        if (picker.open) {
+    _toggleRespPopover() {
+        if (this.open) {
             this._closeRespPopover();
         }
         else {
             this._openRespPopover();
         }
     }
-    async storeResponsivePopoverWidth() {
+    storeResponsivePopoverWidth() {
         if (this.open && !this._listWidth) {
-            this._listWidth = (await this._getPicker()).offsetWidth;
+            this._listWidth = this._getPicker().offsetWidth;
         }
     }
-    toggleValueStatePopover(open) {
-        if (open) {
-            this.openValueStatePopover();
-        }
-        else {
-            this.closeValueStatePopover();
-        }
+    _handleValueStatePopoverFocusout() {
+        this.focused = false;
     }
-    async openValueStatePopover() {
-        const valueStatePopover = await this._getValueStatePopover();
-        if (valueStatePopover) {
-            valueStatePopover.opener = this;
-            valueStatePopover.open = true;
-        }
+    _handleValueStatePopoverAfterClose() {
+        this.valueStateOpen = false;
     }
-    async closeValueStatePopover() {
-        const valueStatePopover = await this._getValueStatePopover();
-        if (valueStatePopover) {
-            valueStatePopover.open = false;
-        }
+    _getValueStatePopover() {
+        return this.shadowRoot.querySelector(".ui5-valuestatemessage-popover");
     }
-    async _getValueStatePopover() {
-        await renderFinished();
-        const popover = this.shadowRoot.querySelector(".ui5-valuestatemessage-popover");
-        // backward compatibility
-        // rework all methods to work with async getters
-        this.valueStatePopover = popover;
-        return popover;
+    _getItemsList() {
+        return this._getPicker().querySelector(".ui5-combobox-items-list");
     }
     _resetFilter() {
         this._userTypedValue = "";
@@ -287,6 +262,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         this._toggleRespPopover();
     }
+    _handleMobileKeydown(e) {
+        if (isEscape(e)) {
+            this.value = this._lastValue || "";
+            this.filterValue = this._lastValue || "";
+            this._closeRespPopover();
+        }
+    }
     _handleMobileInput(e) {
         const { target } = e;
         this.filterValue = target.value;
@@ -308,13 +290,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._clearFocus();
         // autocomplete
         if (shouldAutocomplete && !isAndroid()) {
-            const item = this._getFirstMatchingItem(value);
-            item && this._applyAtomicValueAndSelection(item, value, true);
-            if (value !== "" && (item && !item.selected && !item.isGroupItem)) {
-                this.fireEvent("selection-change", {
-                    item: item,
-                });
-            }
+            this._handleTypeAhead(value, value, true);
         }
         this.fireEvent("input");
         if (isPhone()) {
@@ -399,15 +375,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _handleItemNavigation(e, indexOfItem, isForward) {
         const allItems = this._getItems();
-        const isOpen = this.open;
         const currentItem = allItems[indexOfItem];
         const isGroupItem = currentItem && currentItem.isGroupItem;
         const nextItem = isForward ? allItems[indexOfItem + 1] : allItems[indexOfItem - 1];
-        if ((!isOpen) && ((isGroupItem && !nextItem) || (!isGroupItem && !currentItem))) {
+        if ((!this.open) && ((isGroupItem && !nextItem) || (!isGroupItem && !currentItem))) {
             return;
         }
         this._clearFocus();
-        if (isOpen) {
+        if (this.open) {
             this._itemFocused = true;
             this.value = isGroupItem ? "" : currentItem.text;
             this.focused = false;
@@ -421,18 +396,24 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._isValueStateFocused = false;
         this._announceSelectedItem(indexOfItem);
         this._scrollToItem(indexOfItem, isForward);
-        if (isGroupItem && isOpen) {
+        if (isGroupItem && this.open) {
             return;
         }
         // autocomplete
-        const item = this._getFirstMatchingItem(this.value);
-        item && this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : ""), true);
-        if ((item && !item.selected)) {
+        this._handleTypeAhead(this.value, this.open ? this._userTypedValue : "", false);
+        this.fireEvent("input");
+    }
+    _handleTypeAhead(value, filterValue, checkForGroupItem) {
+        const item = this._getFirstMatchingItem(value);
+        if (!item) {
+            return;
+        }
+        this._applyAtomicValueAndSelection(item, filterValue);
+        if (value !== "" && !item.selected && (!checkForGroupItem || !item.isGroupItem)) {
             this.fireEvent("selection-change", {
                 item: item,
             });
         }
-        this.fireEvent("input");
     }
     _handleArrowDown(e, indexOfItem) {
         const isOpen = this.open;
@@ -510,7 +491,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _keydown(e) {
         const isNavKey = isDown(e) || isUp(e) || isPageUp(e) || isPageDown(e) || isHome(e) || isEnd(e);
-        const picker = this.responsivePopover;
         const allItems = this._getItems();
         this._autocomplete = !(isBackSpace(e) || isDelete(e));
         this._isKeyNavigation = false;
@@ -528,7 +508,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 }
             });
             this._fireChangeEvent();
-            if (picker?.open && !focusedItem?.isGroupItem) {
+            if (this.open && !focusedItem?.isGroupItem) {
                 this._closeRespPopover();
                 this.focused = true;
                 this.inner.setSelectionRange(this.value.length, this.value.length);
@@ -557,44 +537,50 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 selectedItem.focused = true;
                 this.focused = false;
             }
-            else if (this.open && this._filteredItems.length) {
-                // If no item is selected, select the first one on "Show" (F4, Alt+Up/Down)
-                this._handleItemNavigation(e, 0, true /* isForward */);
+            else if (this.open && this._filteredItems.length && !this.value.length) {
+                // If no item is selected, select the first non-group item on "Show" (F4, Alt+Up/Down)
+                const firstNonGroupItem = this._getItems().findIndex(item => item._isVisible && !item.isGroupItem);
+                this._handleItemNavigation(e, firstNonGroupItem, true /* isForward */);
             }
             else {
                 this.focused = true;
             }
         }
     }
+    _handlePopoverKeydown(e) {
+        if (isTabNext(e)) {
+            this._closeRespPopover();
+        }
+    }
+    _handlePopoverFocusout() {
+        this.focused = false;
+    }
     _click() {
         if (isPhone() && !this.readonly) {
             this._openRespPopover();
         }
     }
     _closeRespPopover(e) {
-        const picker = this.responsivePopover;
-        if (e && e.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
-            this.value = this._selectedItemText;
-            this.filterValue = this._selectedItemText;
-        }
-        if (e && e.target.classList.contains("ui5-responsive-popover-close-btn")) {
-            this.value = this._lastValue || "";
-            this.filterValue = this._lastValue || "";
+        if ((e && e.target.classList.contains("ui5-responsive-popover-close-btn"))) {
+            if (this._selectedItemText) {
+                this.value = this._selectedItemText;
+                this.filterValue = this._selectedItemText;
+            }
+            else {
+                this.value = this._lastValue || "";
+                this.filterValue = this._lastValue || "";
+            }
         }
         if (isPhone()) {
             this._fireChangeEvent();
         }
         this._isValueStateFocused = false;
         this._clearFocus();
-        if (picker) {
-            picker.preventFocusRestore = false;
-            picker.open = false;
-        }
+        this.open = false;
+        this.valueStateOpen = false;
     }
-    async _openRespPopover() {
-        const picker = await this._getPicker();
-        picker.opener = this;
-        picker.open = true;
+    _openRespPopover() {
+        this.open = true;
     }
     _filterItems(str) {
         let filteredItem;
@@ -633,12 +619,10 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             return matchingItems[0];
         }
     }
-    _applyAtomicValueAndSelection(item, filterValue, highlightValue) {
+    _applyAtomicValueAndSelection(item, filterValue) {
         const value = (item && item.text) || "";
         this.inner.value = value;
-        if (highlightValue) {
-            this.inner.setSelectionRange(filterValue.length, value.length);
-        }
+        this.inner.setSelectionRange(filterValue.length, value.length);
         this.value = value;
     }
     _selectMatchingItem() {
@@ -740,9 +724,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         item._isVisible = true;
     }
-    async _scrollToItem(indexOfItem, forward) {
-        const picker = await this._getPicker();
-        const list = picker.querySelector(".ui5-combobox-items-list");
+    _scrollToItem(indexOfItem, forward) {
+        const picker = this._getPicker();
+        const list = this._getItemsList();
         const listItem = list?.listItems[indexOfItem];
         if (listItem) {
             const pickerRect = picker.getBoundingClientRect();
@@ -766,15 +750,18 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return ComboBox_1.i18nBundle.getText(SELECT_OPTIONS);
     }
     get inner() {
-        return isPhone() ? this.responsivePopover.querySelector("[ui5-input]").shadowRoot.querySelector("input") : this.shadowRoot.querySelector("[inner-input]");
+        return (isPhone() && this.open)
+            ? this._getPickerInput().shadowRoot.querySelector("input")
+            : this.shadowRoot.querySelector("[inner-input]");
+    }
+    _getPicker() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
     }
-    async _getPicker() {
-        await renderFinished();
-        const picker = this.shadowRoot.querySelector("[ui5-responsive-popover]");
-        // backward compatibility
-        // rework all methods to work with async getters
-        this.responsivePopover = picker;
-        return picker;
+    _getPickerInput() {
+        return this._getPicker().querySelector("[ui5-input]");
+    }
+    get openOnMobile() {
+        return this._isPhone && this.open;
     }
     get hasValueState() {
         return this.valueState !== ValueState.None;
@@ -836,9 +823,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get _valueStateMessageIcon() {
         return this.valueState !== ValueState.None ? ValueStateIconMapping[this.valueState] : "";
     }
-    get open() {
-        return this?.responsivePopover?.open || false;
-    }
     get _isPhone() {
         return isPhone();
     }
@@ -949,6 +933,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], ComboBox.prototype, "_effectiveShowClearIcon", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], ComboBox.prototype, "valueStateOpen", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], ComboBox.prototype, "open", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
 ], ComboBox.prototype, "items", void 0);
@@ -979,7 +969,7 @@ ComboBox = ComboBox_1 = __decorate([
             List,
             BusyIndicator,
             Button,
-            StandardListItem,
+            ListItemStandard,
             ListItemGroup,
             ListItemGroupHeader,
             Popover,