From 3313c4f19627007cba75f694cbc39f75217c9bbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=C3=A9fling?= <zefling@ikilote.net>
Date: Tue, 23 Jul 2024 17:39:25 +0200
Subject: [PATCH] Fix reset with multiple #69

---
 .../src/lib/select2.component.ts                  | 10 ++++++++--
 src/app/app-examples.component.html               | 15 +++++++++++++++
 src/app/app-examples.component.ts                 | 10 ++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/projects/ng-select2-component/src/lib/select2.component.ts b/projects/ng-select2-component/src/lib/select2.component.ts
index 950bb1b..ae881e7 100644
--- a/projects/ng-select2-component/src/lib/select2.component.ts
+++ b/projects/ng-select2-component/src/lib/select2.component.ts
@@ -426,7 +426,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         }
     }
 
-    reset(event: MouseEvent) {
+    reset(event?: MouseEvent) {
         // const test = Select2Utils.getOptionByValue(this._data, this.resetSelectedValue);
         // debugger;
         this.select(
@@ -435,7 +435,9 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
                 : null,
         );
 
-        this.stopEvent(event);
+        if (event) {
+            this.stopEvent(event);
+        }
     }
 
     prevChange(event: Event) {
@@ -949,6 +951,10 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
                         // value is not null. Preselect value
                         const selectedValues: any = Select2Utils.getOptionsByValue(this._data, value, this.multiple);
                         selectedValues.map(item => this.select(item));
+                    } else if (value === null) {
+                        // fix if value is null
+                        this.value = [];
+                        this.reset();
                     }
                 } else {
                     this.select(Select2Utils.getOptionByValue(this._data, value));
diff --git a/src/app/app-examples.component.html b/src/app/app-examples.component.html
index c988623..6ac256a 100644
--- a/src/app/app-examples.component.html
+++ b/src/app/app-examples.component.html
@@ -394,4 +394,19 @@ <h3 id="ex-32">32. auto create when ({{ value30 }})</h3>
         id="selec2-32"
         (autoCreateItem)="update('value32', $event)"
     ></select2>
+
+    <h3 id="ex-33">33. reset form multiple({{ ctrlForm3.get('test33')?.value }})</h3>
+    <form [formGroup]="ctrlForm3">
+        <select2
+            [data]="data32"
+            placeholder="Select Name"
+            formControlName="test33"
+            multiple="true"
+            hideSelectedItems="true"
+        ></select2>
+
+        <button  (click)="reset()">Reset</button>
+    </form>
+
+
 </div>
diff --git a/src/app/app-examples.component.ts b/src/app/app-examples.component.ts
index 355747d..4f2796d 100644
--- a/src/app/app-examples.component.ts
+++ b/src/app/app-examples.component.ts
@@ -65,11 +65,13 @@ export class AppExamplesComponent {
     data29b: Select2Data = JSON.parse(JSON.stringify(data1));
     data30: Select2Data = JSON.parse(JSON.stringify(data1));
     data31 = data31en;
+    data32: Select2Data = JSON.parse(JSON.stringify(data3));
 
     minCountForSearch = Infinity;
 
     ctrlForm: UntypedFormGroup;
     ctrlForm2: UntypedFormGroup;
+    ctrlForm3: UntypedFormGroup;
 
     value1 = 'CA';
     value2 = 'CA';
@@ -120,6 +122,10 @@ export class AppExamplesComponent {
             test5: new UntypedFormControl(0, Validators.required),
         });
 
+        this.ctrlForm3 = this.fb.group({
+            test33: new UntypedFormControl(null),
+        });
+
         this.fg.patchValue(this.formData());
     }
 
@@ -132,6 +138,10 @@ export class AppExamplesComponent {
         this.data6.pop();
     }
 
+    reset() {
+        this.ctrlForm3.reset();
+    }
+
     open(key: string, event: Event) {
         console.log(key, event);
     }