@@ -411,15 +411,17 @@ describe('MatDrawer', () => {
411
411
412
412
beforeEach ( ( ) => {
413
413
fixture = TestBed . createComponent ( DrawerWithFocusableElements ) ;
414
+ fixture . detectChanges ( ) ;
414
415
testComponent = fixture . debugElement . componentInstance ;
415
416
drawer = fixture . debugElement . query ( By . directive ( MatDrawer ) ) . componentInstance ;
416
- firstFocusableElement = fixture . debugElement . query ( By . css ( '.link1 ' ) ) . nativeElement ;
417
- lastFocusableElement = fixture . debugElement . query ( By . css ( '.link1 ' ) ) . nativeElement ;
417
+ firstFocusableElement = fixture . debugElement . query ( By . css ( '.input1 ' ) ) . nativeElement ;
418
+ lastFocusableElement = fixture . debugElement . query ( By . css ( '.input2 ' ) ) . nativeElement ;
418
419
lastFocusableElement . focus ( ) ;
419
420
} ) ;
420
421
421
422
it ( 'should trap focus when opened in "over" mode' , fakeAsync ( ( ) => {
422
423
testComponent . mode = 'over' ;
424
+ fixture . detectChanges ( ) ;
423
425
lastFocusableElement . focus ( ) ;
424
426
425
427
drawer . open ( ) ;
@@ -431,6 +433,7 @@ describe('MatDrawer', () => {
431
433
432
434
it ( 'should trap focus when opened in "push" mode' , fakeAsync ( ( ) => {
433
435
testComponent . mode = 'push' ;
436
+ fixture . detectChanges ( ) ;
434
437
lastFocusableElement . focus ( ) ;
435
438
436
439
drawer . open ( ) ;
@@ -442,6 +445,7 @@ describe('MatDrawer', () => {
442
445
443
446
it ( 'should not trap focus when opened in "side" mode' , fakeAsync ( ( ) => {
444
447
testComponent . mode = 'side' ;
448
+ fixture . detectChanges ( ) ;
445
449
lastFocusableElement . focus ( ) ;
446
450
447
451
drawer . open ( ) ;
@@ -717,12 +721,14 @@ class DrawerDynamicPosition {
717
721
}
718
722
719
723
@Component ( {
724
+ // Note: we use inputs here, because they're guaranteed
725
+ // to be focusable across all platforms.
720
726
template : `
721
727
<mat-drawer-container>
722
728
<mat-drawer position="start" [mode]="mode">
723
- <a class="link1" href="#">link1</a >
729
+ <input type="text" class="input1"/ >
724
730
</mat-drawer>
725
- <a class="link2" href="#">link2</a >
731
+ <input type="text" class="input2"/ >
726
732
</mat-drawer-container>` ,
727
733
} )
728
734
class DrawerWithFocusableElements {
0 commit comments