Skip to content

Commit bbfc304

Browse files
crisbetocrisbeto
committed
refactor: allow options to be passed to focus methods
Updates the `focus` methods on the different components to allow for the `FocusOptions` to be passed in. Fixes #14182.
1 parent b823dbd commit bbfc304

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
@@ -519,8 +519,8 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
519519
}
520520

521521
/** Focuses the button. */
522-
focus(): void {
523-
this._buttonElement.nativeElement.focus();
522+
focus(options?: FocusOptions): void {
523+
this._buttonElement.nativeElement.focus(options);
524524
}
525525

526526
/** 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. */

‎src/material/menu/menu-item.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,11 @@ export class MatMenuItem extends _MatMenuItemMixinBase
9797
}
9898

9999
/** Focuses the menu item. */
100-
focus(origin: FocusOrigin = 'program'): void {
100+
focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {
101101
if (this._focusMonitor) {
102-
this._focusMonitor.focusVia(this._getHostElement(), origin);
102+
this._focusMonitor.focusVia(this._getHostElement(), origin, options);
103103
} else {
104-
this._getHostElement().focus();
104+
this._getHostElement().focus(options);
105105
}
106106
}
107107

‎src/material/menu/menu-trigger.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -263,11 +263,11 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
263263
* Focuses the menu trigger.
264264
* @param origin Source of the menu trigger's focus.
265265
*/
266-
focus(origin: FocusOrigin = 'program') {
266+
focus(origin: FocusOrigin = 'program', options?: FocusOptions) {
267267
if (this._focusMonitor) {
268-
this._focusMonitor.focusVia(this._element, origin);
268+
this._focusMonitor.focusVia(this._element, origin, options);
269269
} else {
270-
this._element.nativeElement.focus();
270+
this._element.nativeElement.focus(options);
271271
}
272272
}
273273

‎src/material/radio/radio.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -511,8 +511,8 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
511511
}
512512

513513
/** Focuses the radio button. */
514-
focus(): void {
515-
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
514+
focus(options?: FocusOptions): void {
515+
this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
516516
}
517517

518518
/**

‎src/material/select/select.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1042,8 +1042,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
10421042
}
10431043

10441044
/** Focuses the select element. */
1045-
focus(): void {
1046-
this._elementRef.nativeElement.focus();
1045+
focus(options?: FocusOptions): void {
1046+
this._elementRef.nativeElement.focus(options);
10471047
}
10481048

10491049
/** Gets the index of the provided option in the option list. */

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -277,8 +277,8 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
277277
}
278278

279279
/** Focuses the slide-toggle. */
280-
focus(): void {
281-
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
280+
focus(options?: FocusOptions): void {
281+
this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
282282
}
283283

284284
/** Toggles the checked state of the slide-toggle. */

‎src/material/slider/slider.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -295,8 +295,8 @@ export class MatSlider extends _MatSliderMixinBase
295295
}
296296

297297
/** set focus to the host element */
298-
focus() {
299-
this._focusHostElement();
298+
focus(options?: FocusOptions) {
299+
this._focusHostElement(options);
300300
}
301301

302302
/** blur the host element */
@@ -750,8 +750,8 @@ export class MatSlider extends _MatSliderMixinBase
750750
* Focuses the native element.
751751
* Currently only used to allow a blur event to fire but will be used with keyboard input later.
752752
*/
753-
private _focusHostElement() {
754-
this._elementRef.nativeElement.focus();
753+
private _focusHostElement(options?: FocusOptions) {
754+
this._elementRef.nativeElement.focus(options);
755755
}
756756

757757
/** Blurs the native element. */

‎tools/public_api_guard/material/button-toggle.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export declare class MatButtonToggle extends _MatButtonToggleMixinBase implement
2020
constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _focusMonitor: FocusMonitor, defaultTabIndex: string, defaultOptions?: MatButtonToggleDefaultOptions);
2121
_markForCheck(): void;
2222
_onButtonClick(): void;
23-
focus(): void;
23+
focus(options?: FocusOptions): void;
2424
ngOnDestroy(): void;
2525
ngOnInit(): void;
2626
}

‎tools/public_api_guard/material/button.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export declare class MatAnchor extends MatButton {
44
_haltDisabledEvents(event: Event): void;
55
}
66

7-
export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple {
7+
export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
88
_animationMode: string;
99
readonly isIconButton: boolean;
1010
readonly isRoundButton: boolean;
@@ -13,7 +13,7 @@ export declare class MatButton extends _MatButtonMixinBase implements OnDestroy,
1313
_getHostElement(): any;
1414
_hasHostAttributes(...attributes: string[]): boolean;
1515
_isRippleDisabled(): boolean;
16-
focus(): void;
16+
focus(_origin: FocusOrigin, options?: FocusOptions): void;
1717
ngOnDestroy(): void;
1818
}
1919

‎tools/public_api_guard/material/checkbox.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
77

88
export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
99

10-
export declare class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
10+
export declare class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
1111
_animationMode?: string | undefined;
1212
_inputElement: ElementRef<HTMLInputElement>;
1313
_onTouched: () => any;
@@ -31,7 +31,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
3131
_onInputClick(event: Event): void;
3232
_onInteractionEvent(event: Event): void;
3333
_onLabelTextChange(): void;
34-
focus(): void;
34+
focus(origin: FocusOrigin = 'keyboard', options?: FocusOptions): void;
3535
ngAfterViewChecked(): void;
3636
ngOnDestroy(): void;
3737
registerOnChange(fn: (value: any) => void): void;

‎tools/public_api_guard/material/chips.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges {
6666
_focus(): void;
6767
_keydown(event?: KeyboardEvent): void;
6868
_onInput(): void;
69-
focus(): void;
69+
focus(options?: FocusOptions): void;
7070
ngOnChanges(): void;
7171
}
7272

@@ -120,13 +120,13 @@ export declare class MatChipList extends _MatChipListMixinBase implements MatFor
120120
ngControl: NgControl);
121121
_allowFocusEscape(): void;
122122
_blur(): void;
123-
_focusInput(): void;
123+
_focusInput(options?: FocusOptions): void;
124124
_keydown(event: KeyboardEvent): void;
125125
_markAsTouched(): void;
126126
_setSelectionByValue(value: any, isUserInput?: boolean): void;
127127
protected _updateFocusForDestroyedChips(): void;
128128
protected _updateTabIndex(): void;
129-
focus(): void;
129+
focus(options?: FocusOptions): void;
130130
ngAfterContentInit(): void;
131131
ngDoCheck(): void;
132132
ngOnDestroy(): void;

‎tools/public_api_guard/material/core.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ export declare class MatOptgroup extends _MatOptgroupMixinBase implements CanDis
226226
label: string;
227227
}
228228

229-
export declare class MatOption implements AfterViewChecked, OnDestroy {
229+
export declare class MatOption implements FocusableOption, AfterViewChecked, OnDestroy {
230230
readonly _stateChanges: Subject<void>;
231231
readonly active: boolean;
232232
readonly disableRipple: boolean | undefined;
@@ -245,7 +245,7 @@ export declare class MatOption implements AfterViewChecked, OnDestroy {
245245
_handleKeydown(event: KeyboardEvent): void;
246246
_selectViaInteraction(): void;
247247
deselect(): void;
248-
focus(): void;
248+
focus(_origin?: FocusOrigin, options?: FocusOptions): void;
249249
getLabel(): string;
250250
ngAfterViewChecked(): void;
251251
ngOnDestroy(): void;

‎tools/public_api_guard/material/expansion.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export declare class MatExpansionPanelHeader implements OnDestroy, FocusableOpti
8989
_keydown(event: KeyboardEvent): void;
9090
_showToggle(): boolean;
9191
_toggle(): void;
92-
focus(origin?: FocusOrigin): void;
92+
focus(origin?: FocusOrigin, options?: FocusOptions): void;
9393
ngOnDestroy(): void;
9494
}
9595

‎tools/public_api_guard/material/input.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export declare class MatInput extends _MatInputMixinBase implements MatFormField
4141
protected _isTextarea(): boolean;
4242
_onInput(): void;
4343
protected _validateType(): void;
44-
focus(): void;
44+
focus(options?: FocusOptions): void;
4545
ngDoCheck(): void;
4646
ngOnChanges(): void;
4747
ngOnDestroy(): void;

0 commit comments

Comments
 (0)