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 df4713374..22d0e11fe 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts @@ -1,6 +1,7 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { AfterViewChecked, ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { SeoService } from '../../services/seo.service'; import { WebsocketService } from '../../services/websocket.service'; +import { StateService } from '../../services/state.service'; @Component({ selector: 'app-mining-dashboard', @@ -8,10 +9,11 @@ import { WebsocketService } from '../../services/websocket.service'; styleUrls: ['./mining-dashboard.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MiningDashboardComponent implements OnInit { +export class MiningDashboardComponent implements OnInit, AfterViewChecked { constructor( private seoService: SeoService, private websocketService: WebsocketService, + private stateService: StateService ) { this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Mining Dashboard`); } @@ -19,4 +21,8 @@ export class MiningDashboardComponent implements OnInit { ngOnInit(): void { this.websocketService.want(['blocks', 'mempool-blocks', 'stats']); } + + ngAfterViewChecked(): void { + this.stateService.searchFocus$.next(true); + } } diff --git a/frontend/src/app/components/search-form/search-form.component.html b/frontend/src/app/components/search-form/search-form.component.html index cdfcfe015..3fc03c83a 100644 --- a/frontend/src/app/components/search-form/search-form.component.html +++ b/frontend/src/app/components/search-form/search-form.component.html @@ -1,7 +1,7 @@
- +
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 2361f8873..2fc25748e 100644 --- a/frontend/src/app/components/search-form/search-form.component.ts +++ b/frontend/src/app/components/search-form/search-form.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, ElementRef } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; -import { Router } from '@angular/router'; +import { EventType, NavigationStart, Router } from '@angular/router'; import { AssetsService } from '../../services/assets.service'; import { StateService } from '../../services/state.service'; import { Observable, of, Subject, zip, BehaviorSubject, combineLatest } from 'rxjs'; @@ -47,6 +47,8 @@ export class SearchFormComponent implements OnInit { this.handleKeyDown($event); } + @ViewChild('searchInput') searchInput: ElementRef; + constructor( private formBuilder: UntypedFormBuilder, private router: Router, @@ -55,11 +57,24 @@ export class SearchFormComponent implements OnInit { private electrsApiService: ElectrsApiService, private apiService: ApiService, private relativeUrlPipe: RelativeUrlPipe, - private elementRef: ElementRef, - ) { } + private elementRef: ElementRef + ) { + } ngOnInit(): void { 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) { + this.searchInput.nativeElement.blur(); + } + }); + + this.stateService.searchFocus$.subscribe(focus => { + if (this.searchInput && focus === true) { + this.searchInput.nativeElement.focus(); + } + }); this.searchForm = this.formBuilder.group({ searchText: ['', Validators.required], diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index aca3593d7..a9c0bb31c 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -1,7 +1,7 @@ -import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; +import { AfterViewChecked, 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, RbfTree } from '../interfaces/node-api.interface'; +import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface'; import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface'; import { ApiService } from '../services/api.service'; import { StateService } from '../services/state.service'; @@ -31,7 +31,7 @@ interface MempoolStatsData { styleUrls: ['./dashboard.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class DashboardComponent implements OnInit, OnDestroy { +export class DashboardComponent implements OnInit, OnDestroy, AfterViewChecked { featuredAssets$: Observable; network$: Observable; mempoolBlocksData$: Observable; @@ -57,6 +57,10 @@ export class DashboardComponent implements OnInit, OnDestroy { private seoService: SeoService ) { } + ngAfterViewChecked(): void { + this.stateService.searchFocus$.next(true); + } + ngOnDestroy(): void { this.currencySubscription.unsubscribe(); this.websocketService.stopTrackRbfSummary(); diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 5ebca9ba1..2c4f06b49 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -138,6 +138,8 @@ export class StateService { fiatCurrency$: BehaviorSubject; rateUnits$: BehaviorSubject; + searchFocus$: Subject = new Subject(); + constructor( @Inject(PLATFORM_ID) private platformId: any, @Inject(LOCALE_ID) private locale: string,