@@ -320,35 +320,33 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
320
320
return toggle . buttonId === buttonId ;
321
321
} ) ;
322
322
323
- let nextButton ;
323
+ let nextButton : MatButtonToggle | null = null ;
324
324
switch ( event . keyCode ) {
325
325
case SPACE :
326
326
case ENTER :
327
- nextButton = this . _buttonToggles . get ( index ) ;
327
+ nextButton = this . _buttonToggles . get ( index ) || null ;
328
328
break ;
329
329
case UP_ARROW :
330
- nextButton = this . _buttonToggles . get ( this . _getNextIndex ( index , - 1 ) ) ;
330
+ nextButton = this . _getNextButton ( index , - 1 ) ;
331
331
break ;
332
332
case LEFT_ARROW :
333
- nextButton = this . _buttonToggles . get (
334
- this . _getNextIndex ( index , this . dir === 'ltr' ? - 1 : 1 ) ,
335
- ) ;
333
+ nextButton = this . _getNextButton ( index , this . dir === 'ltr' ? - 1 : 1 ) ;
336
334
break ;
337
335
case DOWN_ARROW :
338
- nextButton = this . _buttonToggles . get ( this . _getNextIndex ( index , 1 ) ) ;
336
+ nextButton = this . _getNextButton ( index , 1 ) ;
339
337
break ;
340
338
case RIGHT_ARROW :
341
- nextButton = this . _buttonToggles . get (
342
- this . _getNextIndex ( index , this . dir === 'ltr' ? 1 : - 1 ) ,
343
- ) ;
339
+ nextButton = this . _getNextButton ( index , this . dir === 'ltr' ? 1 : - 1 ) ;
344
340
break ;
345
341
default :
346
342
return ;
347
343
}
348
344
349
- event . preventDefault ( ) ;
350
- nextButton ?. _onButtonClick ( ) ;
351
- nextButton ?. focus ( ) ;
345
+ if ( nextButton ) {
346
+ event . preventDefault ( ) ;
347
+ nextButton . _onButtonClick ( ) ;
348
+ nextButton . focus ( ) ;
349
+ }
352
350
}
353
351
354
352
/** Dispatch change event with current selection and group value. */
@@ -423,22 +421,33 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
423
421
} ) ;
424
422
if ( this . selected ) {
425
423
( this . selected as MatButtonToggle ) . tabIndex = 0 ;
426
- } else if ( this . _buttonToggles . length > 0 ) {
427
- this . _buttonToggles . get ( 0 ) ! . tabIndex = 0 ;
424
+ } else {
425
+ for ( let i = 0 ; i < this . _buttonToggles . length ; i ++ ) {
426
+ const toggle = this . _buttonToggles . get ( i ) ! ;
427
+
428
+ if ( ! toggle . disabled ) {
429
+ toggle . tabIndex = 0 ;
430
+ break ;
431
+ }
432
+ }
428
433
}
429
434
this . _markButtonsForCheck ( ) ;
430
435
}
431
436
432
- /** Obtain the subsequent index to which the focus shifts. */
433
- private _getNextIndex ( index : number , offset : number ) : number {
434
- let nextIndex = index + offset ;
435
- if ( nextIndex === this . _buttonToggles . length ) {
436
- nextIndex = 0 ;
437
- }
438
- if ( nextIndex === - 1 ) {
439
- nextIndex = this . _buttonToggles . length - 1 ;
437
+ /** Obtain the subsequent toggle to which the focus shifts. */
438
+ private _getNextButton ( startIndex : number , offset : number ) : MatButtonToggle | null {
439
+ const items = this . _buttonToggles ;
440
+
441
+ for ( let i = 1 ; i <= items . length ; i ++ ) {
442
+ const index = ( startIndex + offset * i + items . length ) % items . length ;
443
+ const item = items . get ( index ) ;
444
+
445
+ if ( item && ! item . disabled ) {
446
+ return item ;
447
+ }
440
448
}
441
- return nextIndex ;
449
+
450
+ return null ;
442
451
}
443
452
444
453
/** Updates the selection state of the toggles in the group based on a value. */
0 commit comments