Set focus when selecting tag value.

src/Squidex/Pipeline/Squid/icon-happy.svg

@@ -1,13 +1,13 @@
 <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 391.9">
   <style>
     .st0{fill:#3389ff}
-	.st1{fill:#3370ff}
+	  .st1{fill:#3370ff}
-	.st2{fill:#fff}
+	  .st2{fill:#fff}
-	.st3{fill:#253256}
+	  .st3{fill:#253256}
-	.st6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
+	  .st6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
-	.st10{font-size:30px}
+	  .st10{font-size:30px}
-	.st11{font-size:20px;font-weight:bold;}
+	  .st11{font-size:20px;font-weight:bold;}
-	.st12{fill:#3e4c7d}
+	  .st12{fill:#3e4c7d}
   </style>
   <path class="st0" d="M532.8 152.9c.5-6.9 13.9-1.9 13.3-8.4-6.8-67.5-69.9-110.1-70-110.1-.1 0-73.5 20.2-101.5 82-2.7 5.9 11.6 5.5 9.9 12.2-2.1 8.2-18.6 8.9-20.4 33.1-2 26.1 16.7 55.8 15.1 70.4l18.3 4.5.4-2c.8-4.6 5.1-7.7 9.7-7 4.6.8 7.8 5.1 7 9.7l-.1.5 20.4-6.3.1-.4c.8-4.7 5.2-7.9 9.9-7.1 4.7.8 7.9 5.2 7.1 9.9l-.1.4 17.3 12.5.1-.5c.8-4.6 5.1-7.7 9.7-7 4.6.8 7.7 5.1 7 9.7l-.1.5 18.9 3.1c5.2-20 30.2-36.5 36.7-61.9 6-23.4-9.3-29.4-8.7-37.8z"/>
   <path class="st1" d="M420.9 233.9c-2.7-7-23-1.1-20.3 5.9 9.9 25.8-.3 43.5-12.9 62-9.9 14.5-11.4 31.4-3.4 48.4 3.2 6.8 9 2 5.8-4.8-11.8-24.9 12.4-41.3 22.3-60 7.8-15 15.1-34.4 8.5-51.5zM460.8 245.3c4.2-7.4 22.9 1.6 18.6 9-15.7 27.3-9.7 48.1-1.6 70.1.5 1.3 15.2 19.1-7.8 53.8-4.7 7.1-9.3 1.1-4.6-6 17.3-26.1-2.6-47.1-8.1-68.9-4.3-17.6-6.9-39.9 3.5-58z"/>

src/Squidex/app/framework/angular/forms/tag-editor.component.ts

@@ -213,10 +213,10 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
     public markTouched() {
         this.selectValue(this.addInput.value);
 
-        this.callTouched();
         this.resetAutocompletion();
+        this.resetFocus();
 
-        this.hasFocus = false;
+        this.callTouched();
     }
 
     public remove(index: number) {
@@ -299,7 +299,11 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
         return true;
     }
 
-    public selectValue(value: string) {
+    public selectValue(value: string, noFocus?: boolean) {
+        if (!noFocus) {
+            this.inputElement.nativeElement.focus();
+        }
+
         if (value && this.converter.isValidInput(value)) {
             const converted = this.converter.convert(value);
 
@@ -330,6 +334,10 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
         this.suggestedIndex = selection;
     }
 
+    public resetFocus(): any {
+        this.hasFocus = false;
+    }
+
     private resetForm() {
         this.addInput.reset();
     }