OnPush fixes.

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

@@ -71,7 +71,9 @@ export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TagEditorComponent), multi: true
 };
 
-const SIZE_CACHE: { [key: string]: number } = {};
+const CACHED_SIZES: { [key: string]: number } = {};
+
+let CACHED_FONT: string;
 
 @Component({
     selector: 'sqx-tag-editor',
@@ -132,6 +134,12 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
     }
 
     public ngAfterViewInit() {
+        if (!CACHED_FONT) {
+            const style = window.getComputedStyle(this.inputElement.nativeElement);
+
+            CACHED_FONT = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`;
+        }
+
         this.resetSize();
     }
 
@@ -207,6 +215,9 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
     }
 
     public resetSize() {
+        if (!CACHED_FONT) {
+            return;
+        }
 
         if (!canvas) {
             canvas = document.createElement('canvas');
@@ -216,21 +227,20 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
             const ctx = canvas.getContext('2d');
 
             if (ctx) {
+                ctx.font = CACHED_FONT;
+
                 const text = this.inputElement.nativeElement.value;
+                const textKey = `${text}§${this.placeholder}§${ctx.font}`;
 
-                let width = SIZE_CACHE[text];
+                let width = CACHED_SIZES[textKey];
 
                 if (!width) {
-                    const style = window.getComputedStyle(this.inputElement.nativeElement);
-
-                    ctx.font = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`;
-
                     const widthText = ctx.measureText(text).width;
                     const widthPlaceholder = ctx.measureText(this.placeholder).width;
 
                     width = Math.max(widthText, widthPlaceholder);
 
-                    SIZE_CACHE[text] = width;
+                    CACHED_SIZES[textKey] = width;
                 }
 
                 this.inputElement.nativeElement.style.width = <any>((width + 5) + 'px');

src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 
 import {
     fadeAnimation,
@@ -43,6 +43,7 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit {
     public position = 'left';
 
     constructor(
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly onboardingService: OnboardingService,
         private readonly renderer: Renderer2
     ) {
@@ -74,6 +75,8 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit {
                     if (this.isSameOrParent(fromPoint)) {
                         this.tooltipModal.show();
 
+                        this.changeDetector.detectChanges();
+
                         this.closeTimer = setTimeout(() => {
                             this.hideThis();
                         }, 10000);

src/Squidex/app/framework/angular/modals/tooltip.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 
 import { ModalModel } from './../../utils/modal-view';
 
@@ -33,6 +33,7 @@ export class TooltipComponent implements OnDestroy, OnInit {
     public modal = new ModalModel();
 
     constructor(
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly renderer: Renderer2
     ) {
     }
@@ -52,6 +53,8 @@ export class TooltipComponent implements OnDestroy, OnInit {
             this.targetMouseEnterListener =
                 this.renderer.listen(this.target, 'mouseenter', () => {
                     this.modal.show();
+
+                    this.changeDetector.detectChanges();
                 });
 
             this.targetMouseLeaveListener =

src/Squidex/app/shell/pages/internal/internal-area.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 
@@ -22,8 +22,7 @@ import {
     templateUrl: './internal-area.component.html',
     animations: [
         fadeAnimation
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    ]
 })
 export class InternalAreaComponent implements OnDestroy, OnInit {
     private queryParamsSubscription: Subscription;