Force change detection on externally opened modal

frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.ts

@@ -28,7 +28,7 @@
 
 import {OpModalComponent} from "core-components/op-modals/op-modal.component";
 import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
-import {Component, ElementRef, Inject} from "@angular/core";
+import {ChangeDetectorRef, Component, ElementRef, Inject} from "@angular/core";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 
@@ -65,9 +65,10 @@ export class ConfirmDialogModal extends OpModalComponent {
 
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
+              readonly cdRef:ChangeDetectorRef,
               readonly I18n:I18nService) {
 
-    super(locals, elementRef);
+    super(locals, cdRef, elementRef);
 
     this.options = locals.options || {};
     this.closeOnEscape = _.defaultTo(this.options.closeByEscape, true);

frontend/src/app/components/modals/editor/macro-child-pages-modal/child-pages-macro.modal.ts

@@ -28,7 +28,7 @@
 
 import {OpModalComponent} from "core-components/op-modals/op-modal.component";
 import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
-import {AfterViewInit, Component, ElementRef, Inject, ViewChild} from "@angular/core";
+import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, ViewChild} from "@angular/core";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 
@@ -61,9 +61,10 @@ export class ChildPagesMacroModal extends OpModalComponent implements AfterViewI
 
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
+              readonly cdRef:ChangeDetectorRef,
               readonly I18n:I18nService) {
 
-    super(locals, elementRef);
+    super(locals, cdRef, elementRef);
     this.selectedPage = this.page = this.locals.page;
     this.selectedIncludeParent = this.includeParent = this.locals.includeParent;
 

frontend/src/app/components/modals/editor/macro-code-block-modal/code-block-macro.modal.ts

@@ -28,7 +28,7 @@
 
 import {OpModalComponent} from "core-components/op-modals/op-modal.component";
 import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
-import {AfterViewInit, Component, ElementRef, Inject, ViewChild} from "@angular/core";
+import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, ViewChild} from "@angular/core";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {WorkPackageCreateService} from "core-components/wp-new/wp-create.service";
@@ -72,9 +72,10 @@ export class CodeBlockMacroModal extends OpModalComponent implements AfterViewIn
 
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
+              readonly cdRef:ChangeDetectorRef,
               readonly I18n:I18nService) {
 
-    super(locals, elementRef);
+    super(locals, cdRef, elementRef);
     this.languageClass = locals.languageClass || 'language-text';
     this.content = locals.content;
 

frontend/src/app/components/modals/editor/macro-wiki-include-page-modal/wiki-include-page-macro.modal.ts

@@ -28,7 +28,7 @@
 
 import {OpModalComponent} from "core-components/op-modals/op-modal.component";
 import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
-import {AfterViewInit, Component, ElementRef, Inject, ViewChild} from "@angular/core";
+import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, ViewChild} from "@angular/core";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {WorkPackageCreateService} from "core-components/wp-new/wp-create.service";
@@ -62,9 +62,10 @@ export class WikiIncludePageMacroModal extends OpModalComponent implements After
 
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
+              readonly cdRef:ChangeDetectorRef,
               readonly I18n:I18nService) {
 
-    super(locals, elementRef);
+    super(locals, cdRef, elementRef);
     this.selectedPage = this.page = this.locals.page;
 
     // We could provide an autocompleter here to get correct page names

frontend/src/app/components/modals/editor/macro-wp-button-modal/wp-button-macro.modal.ts

@@ -28,7 +28,7 @@
 
 import {OpModalComponent} from "core-components/op-modals/op-modal.component";
 import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
-import {AfterViewInit, Component, ElementRef, Inject, ViewChild} from "@angular/core";
+import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, ViewChild} from "@angular/core";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {WorkPackageCreateService} from "core-components/wp-new/wp-create.service";
@@ -70,9 +70,10 @@ export class WpButtonMacroModal extends OpModalComponent implements AfterViewIni
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
               @Inject(IWorkPackageCreateServiceToken) protected wpCreate:WorkPackageCreateService,
               protected currentProject:CurrentProjectService,
+              readonly cdRef:ChangeDetectorRef,
               readonly I18n:I18nService) {
 
-    super(locals, elementRef);
+    super(locals, cdRef, elementRef);
     this.selectedType = this.type = this.locals.type;
     this.classes = this.locals.classes;
     this.buttonStyle = this.classes === 'button';

frontend/src/app/components/modals/wp-destroy-modal/wp-destroy.modal.ts

@@ -31,7 +31,7 @@ import {States} from '../../states.service';
 import {WorkPackageNotificationService} from '../../wp-edit/wp-notification.service';
 import {NotificationsService} from "core-app/modules/common/notifications/notifications.service";
 import {OpModalComponent} from "core-components/op-modals/op-modal.component";
-import {Component, ElementRef, Inject, OnInit} from "@angular/core";
+import {ChangeDetectorRef, Component, ElementRef, Inject, OnInit} from "@angular/core";
 import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
@@ -65,13 +65,14 @@ export class WpDestroyModal extends OpModalComponent implements OnInit {
               readonly WorkPackageService:WorkPackageService,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
               readonly I18n:I18nService,
+              readonly cdRef:ChangeDetectorRef,
               readonly $state:StateService,
               readonly states:States,
               readonly wpTableFocus:WorkPackageTableFocusService,
               readonly wpListService:WorkPackagesListService,
               readonly wpNotificationsService:WorkPackageNotificationService,
               readonly notificationsService:NotificationsService) {
-    super(locals, elementRef);
+    super(locals, cdRef, elementRef);
   }
 
   ngOnInit() {

frontend/src/app/components/op-modals/op-modal.component.ts

@@ -1,4 +1,4 @@
-import {ElementRef, OnDestroy, OnInit} from '@angular/core';
+import {AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit} from '@angular/core';
 import {OpModalLocalsMap} from 'core-components/op-modals/op-modal.types';
 import {OpModalService} from 'core-components/op-modals/op-modal.service';
 import {EventEmitter} from '@angular/core';
@@ -21,7 +21,9 @@ export abstract class OpModalComponent implements OnInit, OnDestroy {
 
   public openingEvent = new EventEmitter<this>();
 
-  constructor(public locals:OpModalLocalsMap, readonly elementRef:ElementRef) {
+  constructor(public locals:OpModalLocalsMap,
+              readonly cdRef:ChangeDetectorRef,
+              readonly elementRef:ElementRef) {
   }
 
   ngOnInit() {
@@ -39,7 +41,7 @@ export abstract class OpModalComponent implements OnInit, OnDestroy {
    * @returns {boolean}
    */
   public onClose():boolean {
-    this.afterFocusOn.focus();
+    this.afterFocusOn && this.afterFocusOn.focus();
     return true;
   }
 
@@ -49,6 +51,7 @@ export abstract class OpModalComponent implements OnInit, OnDestroy {
 
   public onOpen(modalElement:JQuery) {
     this.openingEvent.emit();
+    this.cdRef.detectChanges();
   }
 
   protected get afterFocusOn():JQuery {