From 38e0910fc775a9c81e8846355bc722457d48357c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E4=B8=96=E5=86=9B?=
 <30999793+AllForNothing@users.noreply.github.com>
Date: Mon, 27 Sep 2021 18:46:27 +0800
Subject: [PATCH] Auto-focus for filter component (#15672)

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../system-robot-accounts.component.html      |  2 +-
 .../robot-account.component.html              |  2 +-
 .../components/filter/filter.component.html   |  2 +-
 .../components/filter/filter.component.scss   |  4 +--
 .../filter/filter.component.spec.ts           | 36 +++++++++++++++++++
 .../components/filter/filter.component.ts     | 11 +++++-
 6 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 src/portal/src/app/shared/components/filter/filter.component.spec.ts

diff --git a/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html b/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html
index fd3dde2d78d..6864313a5bd 100644
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html
@@ -5,7 +5,7 @@ <h2 class="custom-h2">{{"SYSTEM_ROBOT.ROBOT_ACCOUNT_NAV" | translate}}</h2>
       <div class="flex-xs-middle option-left">
       </div>
       <div class="flex-xs-middle option-right">
-        <hbr-filter [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
+        <hbr-filter [width]="240" [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
         <span class="refresh-btn" (click)="refresh()">
           <clr-icon shape="refresh"></clr-icon>
         </span>
diff --git a/src/portal/src/app/base/project/robot-account/robot-account.component.html b/src/portal/src/app/base/project/robot-account/robot-account.component.html
index cd619e693f4..8e9321294fd 100644
--- a/src/portal/src/app/base/project/robot-account/robot-account.component.html
+++ b/src/portal/src/app/base/project/robot-account/robot-account.component.html
@@ -4,7 +4,7 @@
       <div class="flex-xs-middle option-left">
       </div>
       <div class="flex-xs-middle option-right">
-        <hbr-filter [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
+        <hbr-filter [width]="240" [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
         <span class="refresh-btn" (click)="refresh()">
           <clr-icon shape="refresh"></clr-icon>
         </span>
diff --git a/src/portal/src/app/shared/components/filter/filter.component.html b/src/portal/src/app/shared/components/filter/filter.component.html
index 83d5ce0650b..af2a29c9e56 100644
--- a/src/portal/src/app/shared/components/filter/filter.component.html
+++ b/src/portal/src/app/shared/components/filter/filter.component.html
@@ -1,6 +1,6 @@
 <span>
     <clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon>
-    <input [attr.readOnly]="readonly" [hidden]="!isShowSearchBox" type="text" class="filter-input clr-input" autofocus (keyup)="valueChange()" (focus)="inputFocus()"
+    <input [style.width.px]="width"  #inputElement [attr.readOnly]="readonly" [hidden]="!isShowSearchBox" type="text" class="filter-input clr-input" autofocus (keyup)="valueChange()" (focus)="inputFocus()"
         placeholder="{{placeHolder}}" [(ngModel)]="currentValue" />
     <span class="filter-divider" *ngIf="withDivider"></span>
 </span>
diff --git a/src/portal/src/app/shared/components/filter/filter.component.scss b/src/portal/src/app/shared/components/filter/filter.component.scss
index 2ea83e66351..961984c1440 100644
--- a/src/portal/src/app/shared/components/filter/filter.component.scss
+++ b/src/portal/src/app/shared/components/filter/filter.component.scss
@@ -1,6 +1,6 @@
 .filter-icon {
     position: relative;
-    right: -12px;
+    right: -20px;
 }
 
 .filter-divider {
@@ -24,5 +24,5 @@
 }
 
 .filter-input {
-    padding-left: 15px;
+    padding-left: 24px;
 }
diff --git a/src/portal/src/app/shared/components/filter/filter.component.spec.ts b/src/portal/src/app/shared/components/filter/filter.component.spec.ts
new file mode 100644
index 00000000000..d21e72b33d8
--- /dev/null
+++ b/src/portal/src/app/shared/components/filter/filter.component.spec.ts
@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { SharedTestingModule } from "../../shared.module";
+import { FilterComponent } from "./filter.component";
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SharedTestingModule,
+      ],
+      declarations: [FilterComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should be focused', async () => {
+    await fixture.whenStable();
+    const searchIcon: HTMLElement = fixture.nativeElement.querySelector('.search-btn');
+    searchIcon.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const input: HTMLInputElement = fixture.nativeElement.querySelector('.filter-input:focus');
+    expect(input).toBeTruthy();
+  });
+});
diff --git a/src/portal/src/app/shared/components/filter/filter.component.ts b/src/portal/src/app/shared/components/filter/filter.component.ts
index 4d8323e31ac..78cc6e21765 100644
--- a/src/portal/src/app/shared/components/filter/filter.component.ts
+++ b/src/portal/src/app/shared/components/filter/filter.component.ts
@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, Input, Output, OnInit, EventEmitter } from "@angular/core";
+import { Component, Input, Output, OnInit, EventEmitter, ViewChild, ElementRef, ChangeDetectorRef } from "@angular/core";
 import { Subject } from "rxjs";
 import { debounceTime } from 'rxjs/operators';
 
@@ -35,6 +35,11 @@ export class FilterComponent implements OnInit {
   }
   @Input() expandMode: boolean = false;
   @Input() withDivider: boolean = false;
+  @Input() width: number;
+  @ViewChild("inputElement")
+  inputElement: ElementRef;
+  constructor(private cd: ChangeDetectorRef) {
+  }
 
   ngOnInit(): void {
     this.filterTerms
@@ -59,6 +64,10 @@ export class FilterComponent implements OnInit {
       return;
     }
     this.isExpanded = !this.isExpanded;
+    if (this.isExpanded) {// Be focused when open search
+      this.cd.detectChanges();
+      this.inputElement.nativeElement.focus();
+    }
     this.openFlag.emit(this.isExpanded);
   }