only handle the keyboard events on header (#8488)

This commit is contained in:
Alan Ren
2019-11-26 13:42:04 -08:00
committed by GitHub
parent d1ccbf028f
commit 20e9b329b1

View File

@@ -21,7 +21,7 @@ import * as DOM from 'vs/base/browser/dom';
@Component({
selector: 'modelview-groupContainer',
template: `
<div *ngIf="hasHeader()" [class]="getHeaderClass()" (click)="changeState()" [tabindex]="isCollapsible()? 0 : -1" [attr.role]="isCollapsible() ? 'button' : null" [attr.aria-expanded]="isCollapsible() ? !collapsed : null">
<div *ngIf="hasHeader()" [class]="getHeaderClass()" (click)="changeState()" (keydown)="onKeyDown($event)" [tabindex]="isCollapsible()? 0 : -1" [attr.role]="isCollapsible() ? 'button' : null" [attr.aria-expanded]="isCollapsible() ? !collapsed : null">
{{_containerLayout.header}}
</div>
<div #container *ngIf="items" class="modelview-group-container" [style.width]="getContainerWidth()" [style.display]="getContainerDisplayStyle()">
@@ -51,23 +51,6 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
ngOnInit(): void {
this.baseInit();
this.onkeydown(this._el.nativeElement, (e: StandardKeyboardEvent) => {
if (e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space) {
this.changeState();
DOM.EventHelper.stop(e, true);
}
else if (e.keyCode === KeyCode.LeftArrow) {
if (!this.collapsed) {
this.changeState();
}
DOM.EventHelper.stop(e, true);
} else if (e.keyCode === KeyCode.RightArrow) {
if (this.collapsed) {
this.changeState();
}
DOM.EventHelper.stop(e, true);
}
});
}
ngOnDestroy(): void {
@@ -77,6 +60,25 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
ngAfterViewInit(): void {
}
onKeyDown(event: KeyboardEvent): void {
let e = new StandardKeyboardEvent(event);
if (e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space) {
this.changeState();
DOM.EventHelper.stop(e, true);
}
else if (e.keyCode === KeyCode.LeftArrow) {
if (!this.collapsed) {
this.changeState();
}
DOM.EventHelper.stop(e, true);
} else if (e.keyCode === KeyCode.RightArrow) {
if (this.collapsed) {
this.changeState();
}
DOM.EventHelper.stop(e, true);
}
}
/// IComponent implementation
public setLayout(layout: GroupLayout): void {
@@ -94,7 +96,7 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
}
private hasHeader(): boolean {
return this._containerLayout && this._containerLayout.header !== undefined;
return this._containerLayout && !!this._containerLayout.header;
}
private isCollapsible(): boolean {