From 6d5be78dd06d2b13a6636201eb1d1cb960e50a2f Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 25 Jul 2023 15:03:39 +0900 Subject: [PATCH] [search bar] use afterviewinit instead of afterviewchecked --- .../mining-dashboard.component.ts | 17 +++++++++++++---- .../search-form/search-form.component.ts | 8 +++++--- .../src/app/dashboard/dashboard.component.ts | 6 +++--- .../lightning-dashboard.component.ts | 6 +++--- 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts index c7670bc1e..6353ab8b8 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts +++ b/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(); + } + } + }); } } diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts index 2fc25748e..61b3351b7 100644 --- a/frontend/src/app/components/search-form/search-form.component.ts +++ b/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(); } }); diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index 6d61953cf..05381453d 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/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; network$: Observable; mempoolBlocksData$: Observable; @@ -57,7 +57,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewChecked { private seoService: SeoService ) { } - ngAfterViewChecked(): void { + ngAfterViewInit(): void { this.stateService.focusSearchInputDesktop(); } diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts index adaa8d115..e58d5f124 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts +++ b/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; nodesRanking$: Observable; 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(); } }