Auto-focus for filter component (#15672)

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
孙世军 2021-09-27 18:46:27 +08:00 committed by GitHub
parent fc1db450b2
commit 38e0910fc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 6 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

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

View File

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