Skip to content

Commit cc0a68a

Browse files
crisbetommalerba
crisbeto
authored and
mmalerba
committed
refactor: allow options to be passed to focus methods (#14184)
Updates the `focus` methods on the different components to allow for the `FocusOptions` to be passed in. Fixes #14182. (cherry picked from commit e6afdbb)
1 parent 85d43d0 commit cc0a68a

29 files changed

+70
-64
lines changed

‎src/material/button-toggle/button-toggle.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -523,8 +523,8 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
523523
}
524524

525525
/** Focuses the button. */
526-
focus(): void {
527-
this._buttonElement.nativeElement.focus();
526+
focus(options?: FocusOptions): void {
527+
this._buttonElement.nativeElement.focus(options);
528528
}
529529

530530
/** Checks the button toggle due to an interaction with the underlying native button. */

‎src/material/button/button.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {FocusMonitor} from '@angular/cdk/a11y';
9+
import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
1010
import {
1111
ChangeDetectionStrategy,
1212
Component,
@@ -78,7 +78,7 @@ const _MatButtonMixinBase: CanDisableRippleCtor & CanDisableCtor & CanColorCtor
7878
changeDetection: ChangeDetectionStrategy.OnPush,
7979
})
8080
export class MatButton extends _MatButtonMixinBase
81-
implements OnDestroy, CanDisable, CanColor, CanDisableRipple {
81+
implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
8282

8383
/** Whether the button is round. */
8484
readonly isRoundButton: boolean = this._hasHostAttributes('mat-fab', 'mat-mini-fab');
@@ -114,8 +114,10 @@ export class MatButton extends _MatButtonMixinBase
114114
}
115115

116116
/** Focuses the button. */
117-
focus(): void {
118-
this._getHostElement().focus();
117+
focus(_origin?: FocusOrigin, options?: FocusOptions): void {
118+
// Note that we aren't using `_origin`, but we need to keep it because some internal consumers
119+
// use `MatButton` in a `FocusKeyManager` and we need it to match `FocusableOption`.
120+
this._getHostElement().focus(options);
119121
}
120122

121123
_getHostElement() {

‎src/material/checkbox/checkbox.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {FocusMonitor} from '@angular/cdk/a11y';
9+
import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
1010
import {coerceBooleanProperty} from '@angular/cdk/coercion';
1111
import {
1212
Attribute,
@@ -127,7 +127,8 @@ const _MatCheckboxMixinBase:
127127
changeDetection: ChangeDetectionStrategy.OnPush
128128
})
129129
export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
130-
AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
130+
AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple,
131+
FocusableOption {
131132

132133
/**
133134
* Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will
@@ -401,8 +402,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
401402
}
402403

403404
/** Focuses the checkbox. */
404-
focus(): void {
405-
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
405+
focus(origin: FocusOrigin = 'keyboard', options?: FocusOptions): void {
406+
this._focusMonitor.focusVia(this._inputElement, origin, options);
406407
}
407408

408409
_onInteractionEvent(event: Event) {

‎src/material/chips/chip-input.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
156156
}
157157

158158
/** Focuses the input. */
159-
focus(): void {
160-
this._inputElement.focus();
159+
focus(options?: FocusOptions): void {
160+
this._inputElement.focus(options);
161161
}
162162

163163
/** Checks whether a keycode is one of the configured separators. */

‎src/material/chips/chip-list.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -460,7 +460,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
460460
* Focuses the first non-disabled chip in this chip list, or the associated input when there
461461
* are no eligible chips.
462462
*/
463-
focus(): void {
463+
focus(options?: FocusOptions): void {
464464
if (this.disabled) {
465465
return;
466466
}
@@ -473,15 +473,15 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
473473
this._keyManager.setFirstItemActive();
474474
this.stateChanges.next();
475475
} else {
476-
this._focusInput();
476+
this._focusInput(options);
477477
this.stateChanges.next();
478478
}
479479
}
480480

481481
/** Attempt to focus an input if we have one. */
482-
_focusInput() {
482+
_focusInput(options?: FocusOptions) {
483483
if (this._chipInput) {
484-
this._chipInput.focus();
484+
this._chipInput.focus(options);
485485
}
486486
}
487487

‎src/material/chips/chip-text-control.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,5 @@ export interface MatChipTextControl {
2222
empty: boolean;
2323

2424
/** Focuses the text control. */
25-
focus(): void;
25+
focus(options?: FocusOptions): void;
2626
}

‎src/material/core/option/option.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
QueryList,
2525
ViewEncapsulation,
2626
} from '@angular/core';
27+
import {FocusOptions, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
2728
import {Subject} from 'rxjs';
2829
import {MatOptgroup} from './optgroup';
2930

@@ -84,7 +85,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
8485
encapsulation: ViewEncapsulation.None,
8586
changeDetection: ChangeDetectionStrategy.OnPush,
8687
})
87-
export class MatOption implements AfterViewChecked, OnDestroy {
88+
export class MatOption implements FocusableOption, AfterViewChecked, OnDestroy {
8889
private _selected = false;
8990
private _active = false;
9091
private _disabled = false;
@@ -161,11 +162,13 @@ export class MatOption implements AfterViewChecked, OnDestroy {
161162
}
162163

163164
/** Sets focus onto this option. */
164-
focus(): void {
165+
focus(_origin?: FocusOrigin, options?: FocusOptions): void {
166+
// Note that we aren't using `_origin`, but we need to keep it because some internal consumers
167+
// use `MatOption` in a `FocusKeyManager` and we need it to match `FocusableOption`.
165168
const element = this._getHostElement();
166169

167170
if (typeof element.focus === 'function') {
168-
element.focus();
171+
element.focus(options);
169172
}
170173
}
171174

‎src/material/expansion/expansion-panel-header.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,8 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
203203
* @param origin Origin of the action that triggered the focus.
204204
* @docs-private
205205
*/
206-
focus(origin: FocusOrigin = 'program') {
207-
this._focusMonitor.focusVia(this._element, origin);
206+
focus(origin: FocusOrigin = 'program', options?: FocusOptions) {
207+
this._focusMonitor.focusVia(this._element, origin, options);
208208
}
209209

210210
ngOnDestroy() {

‎src/material/input/input.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,8 +310,8 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
310310
}
311311

312312
/** Focuses the input. */
313-
focus(): void {
314-
this._elementRef.nativeElement.focus();
313+
focus(options?: FocusOptions): void {
314+
this._elementRef.nativeElement.focus(options);
315315
}
316316

317317
/** Callback for the cases where the focused state of the input changes. */

‎src/material/list/selection-list.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -320,8 +320,8 @@ export class MatListOption extends _MatListOptionMixinBase
320320
providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
321321
changeDetection: ChangeDetectionStrategy.OnPush
322322
})
323-
export class MatSelectionList extends _MatSelectionListMixinBase implements FocusableOption,
324-
CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
323+
export class MatSelectionList extends _MatSelectionListMixinBase implements CanDisableRipple,
324+
AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
325325

326326
/** The FocusKeyManager which handles focus. */
327327
_keyManager: FocusKeyManager<MatListOption>;
@@ -429,8 +429,8 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
429429
}
430430

431431
/** Focuses the selection list. */
432-
focus() {
433-
this._element.nativeElement.focus();
432+
focus(options?: FocusOptions) {
433+
this._element.nativeElement.focus(options);
434434
}
435435

436436
/** Selects all of the options. */

0 commit comments

Comments
 (0)