Fix search after first type on input

[github/Chocobozzz/PeerTube.git] / client / src / app / header / search-typeahead.component.ts

diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
index c265f2c83d16777777621a8ba3205adffbed7471..d0350368dab790bd80ff089e1b84a32ae0b101e4 100644 (file)
--- a/client/src/app/header/search-typeahead.component.ts
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -1,20 +1,10 @@
-import {
-  Component,
-  AfterViewInit,
-  OnInit,
-  OnDestroy,
-  QueryList,
-  ViewChild,
-  ElementRef
-} from '@angular/core'
-import { Router, Params, ActivatedRoute } from '@angular/router'
+import { Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 import { AuthService, ServerService } from '@app/core'
 import { first, tap } from 'rxjs/operators'
 import { ListKeyManager } from '@angular/cdk/a11y'
-import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes'
-import { SuggestionComponent, Result } from './suggestion.component'
+import { Result, SuggestionComponent } from './suggestion.component'
 import { of } from 'rxjs'
-import { getParameterByName } from '@app/shared/misc/utils'
 import { ServerConfig } from '@shared/models'
 
 @Component({
@@ -22,7 +12,7 @@ import { ServerConfig } from '@shared/models'
   templateUrl: './search-typeahead.component.html',
   styleUrls: [ './search-typeahead.component.scss' ]
 })
-export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewInit {
+export class SearchTypeaheadComponent implements OnInit, OnDestroy {
   @ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement>
 
   hasChannel = false
@@ -35,7 +25,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
   inThisChannelText: string
 
   keyboardEventsManager: ListKeyManager<SuggestionComponent>
-  results: any[] = []
+  results: Result[] = []
 
   constructor (
     private authService: AuthService,
@@ -45,6 +35,9 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
   ) {}
 
   ngOnInit () {
+    this.route.queryParams
+      .pipe(first(params => params.search !== undefined && params.search !== null))
+      .subscribe(params => this.search = params.search)
     this.serverService.getConfig()
       .subscribe(config => this.serverConfig = config)
   }
@@ -53,23 +46,19 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
     if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
   }
 
-  ngAfterViewInit () {
-    this.search = getParameterByName('search', window.location.href) || ''
-  }
-
   get activeResult () {
-    return this.keyboardEventsManager && this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem.result
+    return this.keyboardEventsManager?.activeItem?.result
   }
 
-  get showInstructions () {
+  get areInstructionsDisplayed () {
     return !this.search
   }
 
   get showHelp () {
-    return this.search && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false
+    return this.search && this.newSearch && this.activeResult?.type === 'search-global'
   }
 
-  get anyURI () {
+  get canSearchAnyURI () {
     if (!this.serverConfig) return false
     return this.authService.isLoggedIn()
       ? this.serverConfig.search.remoteUri.users
@@ -131,32 +120,34 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
 
   initKeyboardEventsManager (event: { items: QueryList<SuggestionComponent>, index?: number }) {
     if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+
     this.keyboardEventsManager = new ListKeyManager(event.items)
+
     if (event.index !== undefined) {
       this.keyboardEventsManager.setActiveItem(event.index)
     } else {
       this.keyboardEventsManager.setFirstItemActive()
     }
+
     this.keyboardEventsManager.change.subscribe(
       _ => this.setEventItems(event)
     )
   }
 
-  handleKeyUp (event: KeyboardEvent, indexSelected?: number) {
+  handleKey (event: KeyboardEvent) {
     event.stopImmediatePropagation()
-    if (this.keyboardEventsManager) {
-      if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) {
+    if (!this.keyboardEventsManager) return
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
         this.keyboardEventsManager.onKeydown(event)
-        return false
-      } else if (event.keyCode === ENTER) {
-        this.newSearch = false
-        this.doSearch()
-        return false
-      }
+        break
     }
   }
 
   doSearch () {
+    this.newSearch = false
     const queryParams: Params = {}
 
     if (window.location.pathname === '/search' && this.route.snapshot.queryParams) {