Avoid change detection error by wrapping attach in timeout

frontend/src/app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal-service.ts

@@ -32,7 +32,7 @@ export class UserFieldPortalService {
     const portal = new ComponentPortal(UserFieldPortalComponent, null, localInjector);
 
     // Attach the portal to the outlet
-    outlet.attachComponentPortal(portal);
+    setTimeout(() => outlet.attachComponentPortal(portal));
 
     return outlet;
   }

frontend/src/app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal.component.html

@@ -1,8 +1,8 @@
 <span [ngClass]="{'-multi-line': multiLines}"
-     *ngFor="let user of users; let last = last">
-  <user-avatar [attr.data-user]="user.href"
-               data-class-list="avatar-mini">
-  </user-avatar>
-  <span [textContent]="user.name"></span>
-  <span *ngIf="!multiLines && !last">, </span>
+      *ngFor="let user of users; let last = last">
+    <user-avatar [attr.data-user]="user.href"
+                 data-class-list="avatar-mini">
+    </user-avatar>
+    <span [textContent]="user.name"></span>
+    <span *ngIf="!multiLines && !last">, </span>
 </span>

frontend/src/app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal.component.ts

@@ -1,22 +1,21 @@
-import {Component, ElementRef, Injector, Input, OnInit} from "@angular/core";
+import {ChangeDetectionStrategy, Component, ElementRef, Injector, Input} from "@angular/core";
 import {UserResource} from "core-app/modules/hal/resources/user-resource";
 import {OpDisplayPortalLinesToken, OpDisplayPortalUserToken} from "./user-field-portal.injector";
 
 @Component({
   selector: 'user-field-portal',
   templateUrl: './user-field-portal.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./user-field-portal.component.sass']
 })
-export class UserFieldPortalComponent implements OnInit {
+export class UserFieldPortalComponent {
   @Input() userResources:UserResource[];
   @Input() multiLines:boolean;
 
   public users:UserResource[];
+
   constructor(readonly injector:Injector,
               readonly elementRef:ElementRef) {
-  }
-
-  ngOnInit() {
     this.users = this.injector.get<UserResource[]>(OpDisplayPortalUserToken);
     this.multiLines = this.injector.get<boolean>(OpDisplayPortalLinesToken);
   }

spec/features/custom_fields/multi_user_custom_field_spec.rb

@@ -74,7 +74,7 @@ describe "multi select custom values", js: true do
       expect(page).to have_text "Billy Nobbler"
       expect(page).to have_text "Anton Lupin"
 
-      page.find("div.custom-option", text: "Billy Nobbler").click
+      page.find(".wp-table--cell-span", text: "Billy Nobbler").click
 
       cf_edit_field.unset_value "Anton Lupin", true
       cf_edit_field.set_value "Cooper Quatermaine"