igniteui-angular 13.2.19 → 13.2.21

package/fesm2015/igniteui-angular.mjs

@@ -37177,6 +37177,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         this._updateInput = true;
         // stores the last filtered value - move to common?
         this._internalFilter = '';
+        this._collapsing = false;
         this.findAllMatches = (element) => {
             const value = this.displayKey ? element[this.displayKey] : element;
             if (value === null || value === undefined || value === '') {
@@ -37277,7 +37278,11 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
                 }
             }
         });
-        this.dropdown.opening.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.dropdown.opening.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+            if (args.cancel) {
+                return;
+            }
+            this._collapsing = false;
             const filtered = this.filteredData.find(this.findAllMatches);
             if (filtered === undefined || filtered === null) {
                 this.filterValue = this.searchValue = this.comboInput.value;
@@ -37292,13 +37297,17 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             this._internalFilter = this.comboInput.value;
         });
         this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+            if (args.cancel) {
+                return;
+            }
             if (this.getEditElement() && !args.event) {
-                this.comboInput.focus();
+                this._collapsing = true;
             }
             else {
                 this.clearOnBlur();
                 this._onTouchedCallback();
             }
+            this.comboInput.focus();
         });
         this.dropdown.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.filterValue = this._internalFilter = this.comboInput.value;
@@ -37320,7 +37329,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         if (this.collapsed && this.comboInput.focused) {
             this.open();
         }
-        if (!this.comboInput.value.trim() && this.selectionService.size(this.id) > 0) {
+        if (!this.comboInput.value.trim() && this.selection.length) {
             // handle clearing of input by space
             this.clearSelection();
             this._onChangeCallback(null);
@@ -37355,6 +37364,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
         if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
             this.clearOnBlur();
+            this.close();
         }
         this.composing = false;
         super.handleKeyDown(event);
@@ -37386,6 +37396,15 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         this.comboInput.focus();
     }
     /** @hidden @internal */
+    onBlur() {
+        // when clicking the toggle button to close the combo and immediately clicking outside of it
+        // the collapsed state is not modified as the dropdown is still not closed
+        if (this.collapsed || this._collapsing) {
+            this.clearOnBlur();
+        }
+        super.onBlur();
+    }
+    /** @hidden @internal */
     onFocus() {
         this._internalFilter = this.comboInput.value || '';
     }
@@ -37470,7 +37489,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             argsSelection = Array.isArray(argsSelection) ? argsSelection : [argsSelection];
             this.selectionService.select_items(this.id, argsSelection, true);
             if (this._updateInput) {
-                this.comboInput.value = this._internalFilter = this._value = displayText !== args.displayText
+                this.comboInput.value = this._internalFilter = this._value = this.searchValue = displayText !== args.displayText
                     ? args.displayText
                     : this.createDisplayText(argsSelection, [args.oldSelection]);
             }
@@ -37482,15 +37501,15 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
     }
     createDisplayText(newSelection, oldSelection) {
-        var _a;
+        var _a, _b;
         if (this.isRemote) {
             return this.getRemoteSelection(newSelection, oldSelection);
         }
         if (this.displayKey !== null && this.displayKey !== undefined
             && newSelection.length > 0) {
-            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0];
+            return ((_a = this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0]) === null || _a === void 0 ? void 0 : _a.toString()) || '';
         }
-        return ((_a = newSelection[0]) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+        return ((_b = newSelection[0]) === null || _b === void 0 ? void 0 : _b.toString()) || '';
     }
     clearSelection(ignoreFilter) {
         let newSelection = this.selectionService.get_empty();
@@ -37501,26 +37520,20 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     }
     clearOnBlur() {
         const filtered = this.filteredData.find(this.findMatch);
-        if (filtered === undefined || filtered === null || this.getElementKey(filtered) !== this.selectedItem) {
-            this.clearAndClose();
+        // selecting null in primitive data returns undefined as the search text is '', but the item is null
+        if (filtered === undefined && this.selectedItem !== null || !this.selection.length) {
+            this.clear();
             return;
         }
     }
-    getElementKey(element) {
-        const elementVal = this.valueKey ? element[this.valueKey] : element;
-        return elementVal;
-    }
     getElementVal(element) {
         const elementVal = this.displayKey ? element[this.displayKey] : element;
         return String(elementVal);
     }
-    clearAndClose() {
+    clear() {
         this.clearSelection(true);
         this._internalFilter = '';
         this.searchValue = '';
-        if (!this.collapsed) {
-            this.close();
-        }
     }
     isValid(value) {
         return this.required
@@ -40148,7 +40161,8 @@ class IgxSelectComponent extends IgxDropDownComponent {
     }
     /** @hidden @internal */
     selectItem(newSelection, event) {
-        const oldSelection = this.selectedItem;
+        var _a;
+        const oldSelection = (_a = this.selectedItem) !== null && _a !== void 0 ? _a : {};
         if (newSelection === null || newSelection.disabled || newSelection.isHeader) {
             return;
         }