Ugly modal fix.

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.html

@@ -42,11 +42,11 @@
                 autocomplete="off" 
                 autocorrect="off"
                 autocapitalize="off" 
-                (focus)="patternsModal.show()" (blur)="patternsModal.hide()" />
+                (focus)="patternsModal.show()" />
 
             <ng-container *ngIf="patterns.length > 0 && (showPatternSuggestions | async)">
-                <ng-container *sqxModal="patternsModal" position="bottom-left">
+                <ng-container *sqxModal="patternsModal">
-                    <div class="control-dropdown" [sqxAnchoredTo]="inputPattern" @fade>
+                    <div class="control-dropdown" [sqxAnchoredTo]="inputPattern" position="bottom-left" @fade>
                         <h4>Suggestions</h4>
         
                         <div *ngFor="let pattern of patterns" class="control-dropdown-item control-dropdown-item-selectable" (mousedown)="setPattern(pattern)">

src/Squidex/app/framework/angular/forms/autocomplete.component.html

@@ -6,7 +6,7 @@
         autocapitalize="off">
 
     <ng-container *sqxModal="snapshot.suggestedItems.length > 0" position="bottom-left">
-        <div class="control-dropdown" [sqxAnchoredTo]="input" #container>
+        <div class="control-dropdown" [sqxAnchoredTo]="input" positition="bottom-left" #container @fade>
             <div *ngFor="let item of snapshot.suggestedItems; let i = index" class="control-dropdown-item control-dropdown-item-selectable"
                 [class.active]="i === snapshot.suggestedIndex"
                 [container]="container"

src/Squidex/app/framework/angular/forms/autocomplete.component.ts

@@ -10,7 +10,11 @@ import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs/operators';
 
-import { Keys, StatefulControlComponent } from '@app/framework/internal';
+import {
+    fadeAnimation,
+    Keys,
+    StatefulControlComponent
+} from '@app/framework/internal';
 
 export interface AutocompleteSource {
     find(query: string): Observable<any[]>;
@@ -32,6 +36,9 @@ interface State {
     styleUrls: ['./autocomplete.component.scss'],
     templateUrl: './autocomplete.component.html',
     providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR],
+    animations: [
+        fadeAnimation
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AutocompleteComponent extends StatefulControlComponent<State, any[]> implements OnInit {

src/Squidex/app/framework/angular/forms/color-picker.component.html

@@ -16,8 +16,8 @@
 
 <ng-container *sqxModal="modal">
     <div [sqxAnchoredTo]="input" position="bottom-left"
-        [style.height]="'228px'"
+        [style.height]="'280px'"
-        [style.width]="'130px'">
+        [style.width]="'230px'">
         <div [style.background]="snapshot.value" 
             [cpToggle]="true"
             [cpDialogDisplay]="'inline'"

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

@@ -23,7 +23,7 @@
 </div>
 
 <ng-container *sqxModal="snapshot.suggestedItems.length > 0">
-    <div class="control-dropdown" [sqxAnchoredTo]="form" #container @fade>
+    <div class="control-dropdown" [sqxAnchoredTo]="form" position="bottom-left" #container @fade>
         <div *ngFor="let item of snapshot.suggestedItems; let i = index" class="control-dropdown-item control-dropdown-item-selectable"
             [class.active]="i === snapshot.suggestedIndex"
             [container]="container"

src/Squidex/app/framework/angular/modals/modal.directive.ts

@@ -60,7 +60,7 @@ export class ModalDirective implements OnDestroy {
     }
 
     public ngOnDestroy() {
-        hideModal(this.currentModel);
+        this.hideModal(this.currentModel);
 
         this.eventsView.unsubscribeAll();
         this.eventsModel.unsubscribeAll();
@@ -122,11 +122,13 @@ export class ModalDirective implements OnDestroy {
 
     private subscribeToView() {
         if (this.closeAuto) {
-            document.addEventListener('click', this.documentClickListener, true);
+            this.eventsView.own(timer(500).subscribe(() => {
+                document.addEventListener('click', this.documentClickListener, true);
 
-            this.eventsView.own(() => {
+                this.eventsView.own(() => {
-                document.removeEventListener('click', this.documentClickListener);
+                    document.removeEventListener('click', this.documentClickListener, true);
-            });
+                });
+            }));
         }
 
         if (this.closeAlways && this.renderRoots) {
@@ -138,7 +140,7 @@ export class ModalDirective implements OnDestroy {
 
     private elementListener = (event: MouseEvent) => {
         if (this.isClickedInside(event)) {
-            hideModal(this.currentModel);
+            this.hideModal(this.currentModel);
         }
     }
 
@@ -146,8 +148,8 @@ export class ModalDirective implements OnDestroy {
         const model = this.currentModel;
 
         if (!this.isClickedInside(event)) {
-            this.eventsView.own(timer(0, 100).subscribe(() => {
+            this.eventsView.own(timer(100).subscribe(() => {
-                hideModal(model);
+                this.hideModal(model);
             }));
         }
     }
@@ -169,11 +171,13 @@ export class ModalDirective implements OnDestroy {
             return false;
         }
     }
-}
 
-function hideModal(model: Model) {
+    private hideModal(model: Model) {
-    if (model && isModalModel(model)) {
+        if (model && isModalModel(model)) {
-        model.hide();
+            model.hide();
+
+            this.eventsView.unsubscribeAll();
+        }
     }
 }