igniteui-angular 13.2.19 → 13.2.20

package/fesm2020/igniteui-angular.mjs

@@ -37578,6 +37578,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 === '') {
@@ -37677,7 +37678,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;
@@ -37692,13 +37697,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;
@@ -37720,7 +37729,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);
@@ -37755,6 +37764,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
         if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
             this.clearOnBlur();
+            this.close();
         }
         this.composing = false;
         super.handleKeyDown(event);
@@ -37786,6 +37796,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 || '';
     }
@@ -37900,26 +37919,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