Improved modal view.

src/Squidex/app/features/settings/pages/workflows/workflows-page.component.ts

@@ -57,7 +57,7 @@ export class WorkflowsPageComponent implements OnInit {
     public addStep() {
         let index = this.workflow.steps.length;
 
-        for (let i = index; ;i++) {
+        for (let i = index; i < index + 100; i++) {
             const name = `Step${i}`;
 
             if (!this.workflow.getStep(name)) {

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

@@ -118,6 +118,9 @@ export class DropdownComponent extends StatefulControlComponent<State, any[]> im
         if (value !== this.snapshot.selectedItem) {
             selectedIndex = selectedIndex;
 
+            this.callChange(value);
+            this.callTouched();
+
             this.next(s => ({ ...s, selectedIndex, selectedItem: value }));
         }
 

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

@@ -6,7 +6,7 @@
  */
 
 import { ChangeDetectorRef, Directive, EmbeddedViewRef, Input, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Subscription, timer } from 'rxjs';
 
 import {
     DialogModel,
@@ -22,6 +22,7 @@ import { RootViewComponent } from './root-view.component';
 export class ModalViewDirective implements OnChanges, OnDestroy {
     private subscription: Subscription | null = null;
     private documentClickListener: Function | null = null;
+    private documentClickTimer: Subscription | null = null;
     private renderedView: EmbeddedViewRef<any> | null = null;
 
     @Input('sqxModalView')
@@ -76,6 +77,8 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
             return;
         }
 
+        this.unsubscribeToClick();
+
         if (isOpen && !this.renderedView) {
             const container = this.getContainer();
 
@@ -85,9 +88,9 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
                 this.renderer.setStyle(this.renderedView.rootNodes[0], 'display', 'block');
             }
 
-            setTimeout(() => {
+            this.documentClickTimer = timer(1000, 0).subscribe(() => {
                 this.startListening();
-            }, 1000);
+            });
 
             this.changeDetector.detectChanges();
         } else if (!isOpen && this.renderedView) {
@@ -98,8 +101,6 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
 
             this.renderedView = null;
 
-            this.unsubscribeToClick();
-
             this.changeDetector.detectChanges();
         }
     }
@@ -113,6 +114,8 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
             return;
         }
 
+        this.unsubscribeToClick();
+
         this.documentClickListener =
             this.renderer.listen('document', 'click', (event: MouseEvent) => {
                 if (!event.target || this.renderedView === null) {
@@ -156,5 +159,10 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
             this.documentClickListener();
             this.documentClickListener = null;
         }
+
+        if (this.documentClickTimer) {
+            this.documentClickTimer.unsubscribe();
+            this.documentClickTimer = null;
+        }
     }
 }