Single line tag editor.

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

@@ -1,5 +1,8 @@
 <ng-container>
-    <div class="form-control {{class}}" #form (click)="input.focus()" [class.focus]="hasFocus" [class.disabled]="addInput.disabled">
+    <div class="form-control {{class}}" #form (click)="input.focus()" 
+        [class.single-line]="singleLine"
+        [class.focus]="hasFocus" 
+        [class.disabled]="addInput.disabled">
         <span class="item" *ngFor="let item of items; let i = index" [class.disabled]="addInput.disabled">
             {{item}} <i class="icon-close" (click)="remove(i)"></i>
         </span>

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

@@ -21,6 +21,12 @@ $focus-color: #b3d3ff;
         @include box-shadow-raw(0 0 0 .2rem rgba(51, 137, 255, .25));
         border-color: $focus-color;
     }
+
+    &.single-line {
+        overflow-x: hidden;
+        overflow-y: hidden;
+        white-space: nowrap;
+    }
 }
 
 div {

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

@@ -97,6 +97,9 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
     @Input()
     public suggestions: string[] = [];
 
+    @Input()
+    public singleLine = false;
+
     @Input()
     public class: string;
 
@@ -106,6 +109,9 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
     @Input()
     public inputName = 'tag-editor';
 
+    @ViewChild('form')
+    public formElement: ElementRef;
+
     @ViewChild('input')
     public inputElement: ElementRef;
 
@@ -126,7 +132,7 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
         this.subscription =
             this.addInput.valueChanges.pipe(
                     tap(() => {
-                        this.adjustSize();
+                        this.resetSize();
                     }),
                     map(query => <string>query),
                     map(query => query ? query.trim() : query),
@@ -151,6 +157,7 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
 
     public writeValue(obj: any) {
         this.resetForm();
+        this.resetSize();
 
         if (this.converter && Types.isArrayOf(obj, v => this.converter.isValidValue(v))) {
             this.items = obj;
@@ -191,7 +198,7 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
         this.updateItems([...this.items.slice(0, index), ...this.items.splice(index + 1)]);
     }
 
-    public adjustSize() {
+    public resetSize() {
         const style = window.getComputedStyle(this.inputElement.nativeElement);
 
         if (!canvas) {
@@ -204,14 +211,24 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
             if (ctx) {
                 ctx.font = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`;
 
-                const widthText = ctx.measureText(this.inputElement.nativeElement.value).width;
-                const widthPlaceholder = ctx.measureText(this.placeholder).width;
+                let width = 0;
 
-                const width = Math.max(widthText, widthPlaceholder);
+                if (this.singleLine) {
+                    width = ctx.measureText(this.inputElement.nativeElement.value || this.placeholder).width;
+                } else {
+                    const widthText = ctx.measureText(this.inputElement.nativeElement.value).width;
+                    const widthPlaceholder = ctx.measureText(this.placeholder).width;
+
+                    width = Math.max(widthText, widthPlaceholder);
+                }
 
                 this.inputElement.nativeElement.style.width = <any>((width + 20) + 'px');
             }
         }
+
+        setTimeout(() => {
+            this.formElement.nativeElement.scrollLeft = this.formElement.nativeElement.scrollWidth;
+        }, 0);
     }
 
     public onKeyDown(event: KeyboardEvent) {
@@ -301,6 +318,8 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
         } else {
             this.callChange(this.items);
         }
+
+        this.resetSize();
     }
 }