fix: move focusmonitor from constructor to ngAfterViewInit (#1169)

projects/ng-aquila/documentation/examples/formfield/formfield-custom-tel-input/formfield-custom-tel-input-example.ts

@@ -1,6 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
+    AfterViewInit,
     Component,
     ElementRef,
     Input,
@@ -50,7 +51,11 @@ export class MyTel {
     },
 })
 export class FormfieldCustomTelInputExampleComponent
-    implements ControlValueAccessor, NxFormfieldControl<MyTel>, OnDestroy
+    implements
+        ControlValueAccessor,
+        NxFormfieldControl<MyTel>,
+        OnDestroy,
+        AfterViewInit
 {
     static nextId = 0;
 
@@ -155,17 +160,6 @@ export class FormfieldCustomTelInputExampleComponent
             ],
         });
 
-        _focusMonitor
-            .monitor(_elementRef, true)
-            .pipe(takeUntil(this._destroyed))
-            .subscribe(origin => {
-                if (this.focused && !origin) {
-                    this.onTouched();
-                }
-                this.focused = !!origin;
-                this.stateChanges.next();
-            });
-
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
@@ -179,6 +173,19 @@ export class FormfieldCustomTelInputExampleComponent
         return this._elementRef;
     }
 
+    ngAfterViewInit(): void {
+        this._focusMonitor
+            .monitor(this._elementRef, true)
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(origin => {
+                if (this.focused && !origin) {
+                    this.onTouched();
+                }
+                this.focused = !!origin;
+                this.stateChanges.next();
+            });
+    }
+
     ngOnDestroy(): void {
         this._destroyed.next();
         this._destroyed.complete();

projects/ng-aquila/src/accordion/expansion-panel-header.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ENTER, SPACE } from '@angular/cdk/keycodes';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, Host, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, Host, OnDestroy } from '@angular/core';
 import { merge, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
@@ -27,7 +27,7 @@ import { NxExpansionPanelComponent } from './expansion-panel';
         '(click)': 'toggle()',
     },
 })
-export class NxExpansionPanelHeaderComponent implements OnDestroy {
+export class NxExpansionPanelHeaderComponent implements OnDestroy, AfterViewInit {
     private readonly _destroyed = new Subject<void>();
 
     constructor(
@@ -39,7 +39,9 @@ export class NxExpansionPanelHeaderComponent implements OnDestroy {
         merge(panel.opened, panel.closed, panel._inputChanges.pipe(filter(changes => !!(changes.hideToggle || changes.disabled))))
             .pipe(takeUntil(this._destroyed))
             .subscribe(() => this._cdr.markForCheck());
+    }
 
+    ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef);
     }
 

projects/ng-aquila/src/action/action.component.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, Input, OnDestroy } from '@angular/core';
 
 import { NxActionIconDirective } from './action-icon.directive';
 
@@ -16,7 +16,7 @@ import { NxActionIconDirective } from './action-icon.directive';
     },
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NxActionComponent implements OnDestroy {
+export class NxActionComponent implements OnDestroy, AfterViewInit {
     @ContentChild(NxActionIconDirective) _iconChild!: NxActionIconDirective;
 
     /** Whether this action is selected or not.  */
@@ -57,7 +57,9 @@ export class NxActionComponent implements OnDestroy {
         private readonly _cdr: ChangeDetectorRef,
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
+    ) {}
+
+    ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef);
     }
 

projects/ng-aquila/src/avatar/avatar.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
 
 /** Size of an avatar. */
 export type NxAvatarSize = 'xsmall' | 'small' | 'small-medium' | 'medium' | 'large' | 'xlarge';
@@ -42,11 +42,13 @@ export class NxAvatarComponent {
         '[class.is-button]': 'true',
     },
 })
-export class NxAvatarButtonDirective implements OnDestroy {
+export class NxAvatarButtonDirective implements OnDestroy, AfterViewInit {
     constructor(
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
+    ) {}
+
+    ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef);
     }
 

projects/ng-aquila/src/breadcrumb/breadcrumb-item.component.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 
 @Component({
     selector: 'a[nxBreadcrumbItem]',
@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, Renderer2 }
         class: 'nx-breadcrumb-item',
     },
 })
-export class NxBreadcrumbItemComponent implements OnDestroy {
+export class NxBreadcrumbItemComponent implements OnDestroy, AfterViewInit {
     constructor(
         private readonly _renderer: Renderer2,
         private readonly _elemRef: ElementRef,
@@ -19,6 +19,10 @@ export class NxBreadcrumbItemComponent implements OnDestroy {
         this._focusMonitor.monitor(this._elemRef);
     }
 
+    ngAfterViewInit(): void {
+        this._focusMonitor.monitor(this._elemRef);
+    }
+
     ngOnDestroy(): void {
         this._focusMonitor.stopMonitoring(this._elemRef);
     }

projects/ng-aquila/src/button/button-base.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ChangeDetectorRef, Directive, ElementRef, HostBinding, Input, NgZone, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, Input, NgZone, OnDestroy } from '@angular/core';
 import { NxTriggerButton } from '@aposin/ng-aquila/overlay';
 
 /** Type of a button. */
@@ -14,7 +14,7 @@ const DEFAULT_TYPE = 'primary';
 
 /** @docs-private */
 @Directive()
-export class NxButtonBase implements NxTriggerButton, OnDestroy {
+export class NxButtonBase implements NxTriggerButton, OnDestroy, AfterViewInit {
     private _classNames = '';
 
     /** @docs-private */
@@ -135,7 +135,9 @@ export class NxButtonBase implements NxTriggerButton, OnDestroy {
         private readonly _cdr: ChangeDetectorRef,
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
+    ) {}
+
+    ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef);
     }
 

projects/ng-aquila/src/button/plain-button.component.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core';
 import { NxTriggerButton } from '@aposin/ng-aquila/overlay';
 
 /** Please note: small is only for meant for the One Allianz Design */
@@ -22,7 +22,7 @@ export type NxPlainButtonVariant = 'primary' | 'secondary';
     },
     providers: [{ provide: NxTriggerButton, useExisting: NxPlainButtonComponent }],
 })
-export class NxPlainButtonComponent implements NxTriggerButton, OnDestroy {
+export class NxPlainButtonComponent implements NxTriggerButton, OnDestroy, AfterViewInit {
     /** @docs-private */
     @HostBinding('attr.disabled') get isDisabled(): boolean | null {
         return this.disabled || null;
@@ -80,7 +80,9 @@ export class NxPlainButtonComponent implements NxTriggerButton, OnDestroy {
         private readonly _cdr: ChangeDetectorRef,
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
+    ) {}
+
+    ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef);
     }
 

projects/ng-aquila/src/card/card.component.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy } from '@angular/core';
 
 @Component({
     templateUrl: './card.component.html',
@@ -14,20 +14,22 @@ import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component
         '[class.is-disabled]': 'disabled',
     },
 })
-export class NxCardComponent implements OnDestroy {
+export class NxCardComponent implements OnDestroy, AfterViewInit {
     constructor(
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
         private readonly _cdr: ChangeDetectorRef,
-    ) {
+    ) {}
+
+    private _highlight = false;
+
+    ngAfterViewInit(): void {
         // we still listen for focus in case the user set a tabindex on the element
         // the focus monitor only adds the cdk-keyboard-focus class if the element is focusable
         // meaning it needs a tabindex in this case
         this._focusMonitor.monitor(this._elementRef);
     }
 
-    private _highlight = false;
-
     ngOnDestroy(): void {
         this._focusMonitor.stopMonitoring(this._elementRef);
     }

projects/ng-aquila/src/comparison-table/flex-row/flex-row.component.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -24,7 +24,7 @@ import { NxComparisonTableRowDirective } from '../comparison-table-row.directive
         '[class.has-intersection]': 'row.intersectionCell',
     },
 })
-export class NxComparisonTableFlexRow implements OnDestroy {
+export class NxComparisonTableFlexRow implements OnDestroy, AfterViewInit {
     @Input() row!: NxComparisonTableRowDirective;
 
     private readonly _destroyed = new Subject<void>();
@@ -33,7 +33,9 @@ export class NxComparisonTableFlexRow implements OnDestroy {
         readonly _table: NxComparisonTableBase,
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
+    ) {}
+
+    ngAfterViewInit(): void {
         this._focusMonitor
             .monitor(this._elementRef, true)
             .pipe(takeUntil(this._destroyed))

projects/ng-aquila/src/context-menu/context-menu-item.component.ts

@@ -2,6 +2,7 @@ import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DOCUMENT } from '@angular/common';
 import {
+    AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -41,7 +42,7 @@ import { Subject } from 'rxjs';
     `,
     styleUrls: ['./context-menu-item.component.scss'],
 })
-export class NxContextMenuItemComponent implements OnDestroy {
+export class NxContextMenuItemComponent implements OnDestroy, AfterViewInit {
     /** Stream that emits when the context menu item is hovered. */
     readonly _hovered = new Subject<NxContextMenuItemComponent>();
 
@@ -76,9 +77,7 @@ export class NxContextMenuItemComponent implements OnDestroy {
         @Optional() @Inject(DOCUMENT) private readonly _document: Document | null,
         private readonly _cdr: ChangeDetectorRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
-        this._focusMonitor.monitor(this._elementRef);
-    }
+    ) {}
 
     /** Focuses this context menu item. */
     focus(origin?: FocusOrigin): void {
@@ -89,6 +88,10 @@ export class NxContextMenuItemComponent implements OnDestroy {
         }
     }
 
+    ngAfterViewInit(): void {
+        this._focusMonitor.monitor(this._elementRef);
+    }
+
     ngOnDestroy(): void {
         this._hovered.complete();
         this._focusMonitor.stopMonitoring(this._elementRef);

projects/ng-aquila/src/footer/footer.component.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
 
 @Directive({
     selector: 'nx-footer-copyright',
@@ -28,11 +28,13 @@ export class NxFooterNavigationDirective {}
         role: 'listitem',
     },
 })
-export class NxFooterLinkDirective implements OnDestroy {
+export class NxFooterLinkDirective implements OnDestroy, AfterViewInit {
     constructor(
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
+    ) {}
+
+    ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef, true);
     }
 

projects/ng-aquila/src/header/header.component.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, Input, OnDestroy, QueryList } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, Input, OnDestroy, QueryList } from '@angular/core';
 
 /** This directive defines a header row within the `<nx-header>` component. */
 @Directive({
@@ -91,11 +91,13 @@ export class NxHeaderNavigationItemDirective {}
     },
     template: '<span class="nx-header__link-title"><ng-content></ng-content></span>',
 })
-export class NxHeaderLinkComponent implements OnDestroy {
+export class NxHeaderLinkComponent implements OnDestroy, AfterViewInit {
     constructor(
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
+    ) {}
+
+    ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef);
     }
 

projects/ng-aquila/src/input/password-toggle.component.ts

@@ -51,11 +51,11 @@ export class NxPasswordToggleComponent implements AfterViewInit, OnDestroy {
         private readonly _cdr: ChangeDetectorRef,
         private readonly _elementRef: ElementRef,
         private readonly _focusMonitor: FocusMonitor,
-    ) {
-        this._focusMonitor.monitor(this._elementRef);
-    }
+    ) {}
 
     ngAfterViewInit(): void {
+        this._focusMonitor.monitor(this._elementRef);
+
         if (!this.control) {
             console.warn('You need to pass an input as a control to the password toggle.');
             return;