Trap the tab in the cdk overlay for the search input to make it possible to reach the Search filter checkboxes (#1227)

This commit is contained in:
Martin Muller
2019-10-17 17:12:39 +02:00
committed by Cilibiu Bogdan
parent beee6d277d
commit 1c1a365ac9
2 changed files with 34 additions and 21 deletions

View File

@@ -29,9 +29,15 @@ import { CoreModule } from '@alfresco/adf-core';
import { SearchInputComponent } from './search-input/search-input.component'; import { SearchInputComponent } from './search-input/search-input.component';
import { SearchInputControlComponent } from './search-input-control/search-input-control.component'; import { SearchInputControlComponent } from './search-input-control/search-input-control.component';
import { ContentModule } from '@alfresco/adf-content-services'; import { ContentModule } from '@alfresco/adf-content-services';
import { A11yModule } from '@angular/cdk/a11y';
@NgModule({ @NgModule({
imports: [CommonModule, CoreModule.forChild(), ContentModule.forChild()], imports: [
CommonModule,
CoreModule.forChild(),
ContentModule.forChild(),
A11yModule
],
declarations: [SearchInputComponent, SearchInputControlComponent], declarations: [SearchInputComponent, SearchInputControlComponent],
exports: [SearchInputComponent, SearchInputControlComponent] exports: [SearchInputComponent, SearchInputControlComponent]
}) })

View File

@@ -35,27 +35,34 @@
[overlapTrigger]="true" [overlapTrigger]="true"
class="app-search-options-menu" class="app-search-options-menu"
> >
<app-search-input-control <div
#searchInputControl (keydown.tab)="$event.stopPropagation()"
(click)="$event.stopPropagation()" (keydown.shift.tab)="$event.stopPropagation()"
(submit)="onSearchSubmit($event)"
(searchChange)="onSearchChange($event)"
> >
</app-search-input-control> <div cdkTrapFocus>
<mat-hint *ngIf="hasLibraryConstraint()" class="app-search-hint">{{ <app-search-input-control
'SEARCH.INPUT.HINT' | translate #searchInputControl
}}</mat-hint> (click)="$event.stopPropagation()"
(submit)="onSearchSubmit($event)"
(searchChange)="onSearchChange($event)"
>
</app-search-input-control>
<mat-hint *ngIf="hasLibraryConstraint()" class="app-search-hint">{{
'SEARCH.INPUT.HINT' | translate
}}</mat-hint>
<div id="search-options"> <div id="search-options">
<mat-checkbox <mat-checkbox
*ngFor="let option of searchOptions" *ngFor="let option of searchOptions"
id="{{ option.id }}" id="{{ option.id }}"
[(ngModel)]="option.value" [(ngModel)]="option.value"
[disabled]="option.shouldDisable()" [disabled]="option.shouldDisable()"
(change)="searchByOption()" (change)="searchByOption()"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
> >
{{ option.key | translate }} {{ option.key | translate }}
</mat-checkbox> </mat-checkbox>
</div>
</div>
</div> </div>
</mat-menu> </mat-menu>