Auto-focus for filter component (#15672)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html

@@ -5,7 +5,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>

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>

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>

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;
 }

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();
+  });
+});

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);
   }