From 6ce3c1d75d314f6fc0634a373bb2db4d97b78fd0 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Mon, 24 Jul 2023 10:18:00 +0900
Subject: [PATCH] [search bar] auto focus only in dashboards

---
 .../mining-dashboard.component.ts             | 10 +++++++--
 .../search-form/search-form.component.html    |  2 +-
 .../search-form/search-form.component.ts      | 21 ++++++++++++++++---
 .../src/app/dashboard/dashboard.component.ts  | 10 ++++++---
 frontend/src/app/services/state.service.ts    |  2 ++
 5 files changed, 36 insertions(+), 9 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 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 @@
 <form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
   <div class="d-flex">
     <div class="search-box-container mr-2">
-      <input autofocus (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="Explore the full Bitcoin ecosystem">
+      <input #searchInput (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="Explore the full Bitcoin ecosystem">
       <app-search-results #searchResults [hidden]="dropdownHidden" [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
     </div>
     <div>
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<any>;
   network$: Observable<string>;
   mempoolBlocksData$: Observable<MempoolBlocksData>;
@@ -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<string>;
   rateUnits$: BehaviorSubject<string>;
 
+  searchFocus$: Subject<boolean> = new Subject<boolean>();
+
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,
     @Inject(LOCALE_ID) private locale: string,