[search bar] use afterviewinit instead of afterviewchecked

frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts

@@ -1,7 +1,8 @@
-import { AfterViewChecked, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { SeoService } from '../../services/seo.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from '../../services/state.service';
+import { EventType, NavigationStart, Router } from '@angular/router';
 
 @Component({
   selector: 'app-mining-dashboard',
@@ -9,11 +10,12 @@ import { StateService } from '../../services/state.service';
   styleUrls: ['./mining-dashboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MiningDashboardComponent implements OnInit, AfterViewChecked {
+export class MiningDashboardComponent implements OnInit, AfterViewInit {
   constructor(
     private seoService: SeoService,
     private websocketService: WebsocketService,
-    private stateService: StateService
+    private stateService: StateService,
+    private router: Router
   ) {
     this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Mining Dashboard`);
   }
@@ -22,7 +24,14 @@ export class MiningDashboardComponent implements OnInit, AfterViewChecked {
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
   }
 
-  ngAfterViewChecked(): void {
+  ngAfterViewInit(): void {
     this.stateService.focusSearchInputDesktop();
+    this.router.events.subscribe((e: NavigationStart) => {
+      if (e.type === EventType.NavigationStart) {
+        if (e.url.indexOf('graphs') === -1) { // The mining dashboard and the graph component are part of the same module so we can't use ngAfterViewInit in graphs.component.ts to blur the input
+          this.stateService.focusSearchInputDesktop(); 
+        }
+      }
+    });
   }
 }

frontend/src/app/components/search-form/search-form.component.ts

@@ -65,13 +65,15 @@ export class SearchFormComponent implements OnInit {
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
     
     this.router.events.subscribe((e: NavigationStart) => { // Reset search focus when changing page
-      if (e.type === EventType.NavigationStart) {
+      if (this.searchInput && e.type === EventType.NavigationStart) {
         this.searchInput.nativeElement.blur();
       }
     });
 
-    this.stateService.searchFocus$.subscribe(focus => {
-      if (this.searchInput && focus === true) {
+    this.stateService.searchFocus$.subscribe(() => {
+      if (!this.searchInput) { // Try again a bit later once the view is properly initialized
+        setTimeout(() => this.searchInput.nativeElement.focus(), 100);
+      } else if (this.searchInput) {
         this.searchInput.nativeElement.focus();
       }
     });

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewChecked, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { combineLatest, merge, Observable, of, Subscription } from 'rxjs';
 import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -31,7 +31,7 @@ interface MempoolStatsData {
   styleUrls: ['./dashboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DashboardComponent implements OnInit, OnDestroy, AfterViewChecked {
+export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   featuredAssets$: Observable<any>;
   network$: Observable<string>;
   mempoolBlocksData$: Observable<MempoolBlocksData>;
@@ -57,7 +57,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewChecked {
     private seoService: SeoService
   ) { }
 
-  ngAfterViewChecked(): void {
+  ngAfterViewInit(): void {
     this.stateService.focusSearchInputDesktop();
   }
 

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewChecked, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { share } from 'rxjs/operators';
 import { INodesRanking } from '../../interfaces/node-api.interface';
@@ -12,7 +12,7 @@ import { LightningApiService } from '../lightning-api.service';
   styleUrls: ['./lightning-dashboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LightningDashboardComponent implements OnInit, AfterViewChecked {
+export class LightningDashboardComponent implements OnInit, AfterViewInit {
   statistics$: Observable<any>;
   nodesRanking$: Observable<INodesRanking>;
   officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
@@ -30,7 +30,7 @@ export class LightningDashboardComponent implements OnInit, AfterViewChecked {
     this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share());
   }
 
-  ngAfterViewChecked(): void {
+  ngAfterViewInit(): void {
     this.stateService.focusSearchInputDesktop();
   }
 }