From a944c7dc8996762783efd0c8aa98129327e55067 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Thu, 30 Apr 2020 10:46:28 +0200
Subject: [PATCH] Touch fixed with editors.

---
 .../forms/stock-photo-editor.component.ts     |  1 +
 .../forms/editors/autocomplete.component.ts   |  1 +
 .../forms/editors/tag-editor.component.ts     | 20 +++++++++++--------
 .../forms/references-dropdown.component.ts    |  6 ++----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/app/features/content/shared/forms/stock-photo-editor.component.ts b/frontend/app/features/content/shared/forms/stock-photo-editor.component.ts
index 9eb45dfb6..a7d8a5a5e 100644
--- a/frontend/app/features/content/shared/forms/stock-photo-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/stock-photo-editor.component.ts
@@ -70,6 +70,7 @@ export class StockPhotoEditorComponent extends StatefulControlComponent<State, s
             this.valueControl.valueChanges
                 .subscribe(value => {
                     this.callChange(value);
+                    this.callTouched();
                 }));
     }
 
diff --git a/frontend/app/framework/angular/forms/editors/autocomplete.component.ts b/frontend/app/framework/angular/forms/editors/autocomplete.component.ts
index e8f0f8b06..a672ec83d 100644
--- a/frontend/app/framework/angular/forms/editors/autocomplete.component.ts
+++ b/frontend/app/framework/angular/forms/editors/autocomplete.component.ts
@@ -216,6 +216,7 @@ export class AutocompleteComponent extends StatefulControlComponent<State, Reado
                 }
 
                 this.callChange(selection);
+                this.callTouched();
             } finally {
                 this.resetState();
             }
diff --git a/frontend/app/framework/angular/forms/editors/tag-editor.component.ts b/frontend/app/framework/angular/forms/editors/tag-editor.component.ts
index baaf20460..0fbfc6296 100644
--- a/frontend/app/framework/angular/forms/editors/tag-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/tag-editor.component.ts
@@ -326,7 +326,7 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
     }
 
     public remove(index: number) {
-        this.updateItems(this.snapshot.items.filter((_, i) => i !== index));
+        this.updateItems(this.snapshot.items.filter((_, i) => i !== index), true);
     }
 
     public resetSize() {
@@ -396,7 +396,7 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
             const value = <string>this.addInput.value;
 
             if (!value || value.length === 0) {
-                this.updateItems(this.snapshot.items.slice(0, this.snapshot.items.length - 1));
+                this.updateItems(this.snapshot.items.slice(0, this.snapshot.items.length - 1), false);
 
                 return false;
             }
@@ -436,7 +436,7 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
 
         if (tagValue) {
             if (this.allowDuplicates || !this.isSelected(tagValue)) {
-                this.updateItems([...this.snapshot.items, tagValue]);
+                this.updateItems([...this.snapshot.items, tagValue], true);
             }
 
             this.resetForm();
@@ -449,9 +449,9 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
 
     public toggleValue(isSelected: boolean, tagValue: TagValue) {
         if (isSelected) {
-            this.updateItems([...this.snapshot.items, tagValue]);
+            this.updateItems([...this.snapshot.items, tagValue], true);
         } else {
-            this.updateItems(this.snapshot.items.filter(x => x.id !== tagValue.id));
+            this.updateItems(this.snapshot.items.filter(x => x.id !== tagValue.id), true);
         }
     }
 
@@ -495,7 +495,7 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
         if (!this.hasSelection()) {
             this.onCopy(event);
 
-            this.updateItems([]);
+            this.updateItems([], false);
         }
     }
 
@@ -526,7 +526,7 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
                     }
                 }
 
-                this.updateItems(values);
+                this.updateItems(values, false);
             }
 
             event.preventDefault();
@@ -540,7 +540,7 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
         return s && e && (e - s) > 0;
     }
 
-    private updateItems(items: ReadonlyArray<TagValue>) {
+    private updateItems(items: ReadonlyArray<TagValue>, touched: boolean) {
         this.next(s => ({ ...s, items }));
 
         if (items.length === 0 && this.undefinedWhenEmpty) {
@@ -549,6 +549,10 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
             this.callChange(items.map(x => x.value));
         }
 
+        if (touched) {
+            this.callTouched();
+        }
+
         this.resetSize();
     }
 }
diff --git a/frontend/app/shared/components/forms/references-dropdown.component.ts b/frontend/app/shared/components/forms/references-dropdown.component.ts
index 34268523f..ea10772b6 100644
--- a/frontend/app/shared/components/forms/references-dropdown.component.ts
+++ b/frontend/app/shared/components/forms/references-dropdown.component.ts
@@ -77,22 +77,20 @@ export class ReferencesDropdownComponent extends StatefulControlComponent<State,
                 .subscribe((value: ContentName) => {
                     if (this.selectionControl.enabled) {
                         if (value && value.id) {
-                            this.callTouched();
-
                             if (this.mode === 'Single') {
                                 this.callChange(value.id);
                             } else {
                                 this.callChange([value.id]);
                             }
                         } else {
-                            this.callTouched();
-
                             if (this.mode === 'Single') {
                                 this.callChange(null);
                             } else {
                                 this.callChange([]);
                             }
                         }
+
+                        this.callTouched();
                     }
                 }));
     }