ng-select2-component 15.0.0 → 15.0.1

package/fesm2022/ng-select2-component.mjs

@@ -375,8 +375,10 @@ class Select2 {
     set value(value) {
         if (this.testValueChange(this._value, value)) {
             setTimeout(() => {
-                this._value = value;
-                this.writeValue(value);
+                if (this._value === undefined) {
+                    this._value = value ?? null;
+                }
+                this.writeValue(value ?? null);
             }, 10);
         }
     }
@@ -478,6 +480,7 @@ class Select2 {
         this._disabled = false;
         this._multiple = false;
         this._uid = `select2-${nextUniqueId++}`;
+        this._value = null;
         /** View -> model callback called when select has been touched */
         this._onTouched = () => {
             // do nothing
@@ -500,7 +503,7 @@ class Select2 {
                 if (!this.ifParentContainsClass(target, 'select2-dropdown')) {
                     this.toggleOpenAndClose();
                 }
-                if (!this.ifParentContainsId(target, this._id)) {
+                if (!this.overlay && !this.ifParentContainsId(target, this._id)) {
                     this.clickExit();
                 }
             }
@@ -509,6 +512,10 @@ class Select2 {
                 this.clickExit();
             }
         }
+        else if (this.focused) {
+            const target = e.target;
+            this._focus(this.clickOnSelect2Element(target));
+        }
     }
     ngOnInit() {
         this._viewportRuler.change(100).subscribe(() => {
@@ -584,7 +591,9 @@ class Select2 {
         this.select(this.resetSelectedValue !== undefined
             ? Select2Utils.getOptionByValue(this._data, this.resetSelectedValue) ?? null
             : null);
-        this.stopEvent(event);
+        if (event) {
+            this.stopEvent(event);
+        }
     }
     prevChange(event) {
         event.stopPropagation();
@@ -738,6 +747,26 @@ class Select2 {
         }
         return true;
     }
+    containAlmostOneClasses(element, cssClasses) {
+        if (!element.classList) {
+            return false;
+        }
+        let containAlmostOne = false;
+        for (const cssClass of cssClasses) {
+            if (element.classList.contains(cssClass)) {
+                containAlmostOne = true;
+            }
+        }
+        return containAlmostOne;
+    }
+    clickOnSelect2Element(element) {
+        return this.containAlmostOneClasses(element, [
+            'select2-overlay-backdrop',
+            'select2-label-content',
+            'select2-selection__rendered',
+            'select2-results__option',
+        ]);
+    }
     focusin() {
         if (!this.disabled) {
             this._focus(true);
@@ -749,7 +778,7 @@ class Select2 {
             this._onTouched();
         }
     }
-    select(option) {
+    select(option, emit = true) {
         let value;
         if (option !== null && option !== undefined) {
             if (this.multiple) {
@@ -771,25 +800,36 @@ class Select2 {
                     this.selectionElement?.focus();
                 }
                 value = this.option.value;
+                if (!option && this._value === null) {
+                    this._value = value ?? null;
+                }
             }
         }
         else {
+            // when remove value
+            if (Array.isArray(this.option) ? this.option?.length : this.option) {
+                value = '';
+            }
             this.option = null;
         }
         if (this.multiple && this.hideSelectedItems) {
             this.updateFilteredData();
         }
+        emit &&= value !== undefined && this.testDiffValue(this._value, value);
         if (this._control) {
             this._onChange(value);
         }
-        else {
-            this._value = value;
+        if (emit) {
+            this._value = value ?? null;
+            this.update.emit({
+                component: this,
+                value: this._value,
+                options: Array.isArray(this.option) ? this.option : this.option ? [this.option] : null,
+            });
         }
-        this.update.emit({
-            component: this,
-            value: value,
-            options: Array.isArray(this.option) ? this.option : this.option ? [this.option] : null,
-        });
+    }
+    testDiffValue(val1, val2) {
+        return Array.isArray(val1) ? val1?.length !== val2?.length : val1 !== val2;
     }
     keyDown(event, create = false) {
         if (create && this._testKey(event, ['Enter', 13])) {
@@ -868,7 +908,7 @@ class Select2 {
             this._onChange(value);
         }
         else {
-            this._value = value;
+            this._value = value ?? null;
         }
         this.update.emit({
             component: this,
@@ -1022,10 +1062,33 @@ class Select2 {
                     if (isArray) {
                         // value is not null. Preselect value
                         const selectedValues = Select2Utils.getOptionsByValue(this._data, value, this.multiple);
-                        selectedValues.map(item => this.select(item));
+                        selectedValues.map(item => this.select(item, false));
+                        this._value ??= value;
+                        if (this.testDiffValue(this._value, value)) {
+                            this.update.emit({
+                                component: this,
+                                value: this._value,
+                                options: Array.isArray(this.option) ? this.option : this.option ? [this.option] : null,
+                            });
+                        }
+                    }
+                    else if (value === null) {
+                        // fix if value is null
+                        this.value = [];
+                        this.reset();
+                        this.select(null, false);
+                        if (this.testDiffValue(this._value, value)) {
+                            this._value = [];
+                            this.update.emit({
+                                component: this,
+                                value: this._value,
+                                options: Array.isArray(this.option) ? this.option : this.option ? [this.option] : null,
+                            });
+                        }
                     }
                 }
                 else {
+                    this._value ??= value;
                     this.select(Select2Utils.getOptionByValue(this._data, value));
                 }
             }