Skip to content

Commit 4f52133

Browse files
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 aff565a commit 4f52133

29 files changed

+57
-56
lines changed

src/lib/button-toggle/button-toggle.ts

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

504504
/** Focuses the button. */
505-
focus(): void {
506-
this._buttonElement.nativeElement.focus();
505+
focus(options?: FocusOptions): void {
506+
this._buttonElement.nativeElement.focus(options);
507507
}
508508

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

src/lib/button/button.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ export class MatButton extends _MatButtonMixinBase
122122
}
123123

124124
/** Focuses the button. */
125-
focus(): void {
126-
this._getHostElement().focus();
125+
focus(options?: FocusOptions): void {
126+
this._getHostElement().focus(options);
127127
}
128128

129129
_getHostElement() {

src/lib/checkbox/checkbox.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -401,8 +401,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
401401
}
402402

403403
/** Focuses the checkbox. */
404-
focus(): void {
405-
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
404+
focus(options?: FocusOptions): void {
405+
this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
406406
}
407407

408408
_onInteractionEvent(event: Event) {

src/lib/chips/chip-input.ts

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

152152
/** Focuses the input. */
153-
focus(): void {
154-
this._inputElement.focus();
153+
focus(options?: FocusOptions): void {
154+
this._inputElement.focus(options);
155155
}
156156

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

src/lib/chips/chip-list.ts

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

482482
/** Attempt to focus an input if we have one. */
483-
_focusInput() {
483+
_focusInput(options?: FocusOptions) {
484484
if (this._chipInput) {
485-
this._chipInput.focus();
485+
this._chipInput.focus(options);
486486
}
487487
}
488488

src/lib/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/lib/core/option/option.ts

Lines changed: 3 additions & 2 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} from '@angular/cdk/a11y';
2728
import {Subject} from 'rxjs';
2829
import {MatOptgroup} from './optgroup';
2930

@@ -161,11 +162,11 @@ export class MatOption implements AfterViewChecked, OnDestroy {
161162
}
162163

163164
/** Sets focus onto this option. */
164-
focus(): void {
165+
focus(options?: FocusOptions): void {
165166
const element = this._getHostElement();
166167

167168
if (typeof element.focus === 'function') {
168-
element.focus();
169+
element.focus(options);
169170
}
170171
}
171172

src/lib/expansion/expansion-panel-header.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,8 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
173173
* @param origin Origin of the action that triggered the focus.
174174
* @docs-private
175175
*/
176-
focus(origin: FocusOrigin = 'program') {
177-
this._focusMonitor.focusVia(this._element, origin);
176+
focus(origin: FocusOrigin = 'program', options?: FocusOptions) {
177+
this._focusMonitor.focusVia(this._element, origin, options);
178178
}
179179

180180
ngOnDestroy() {

src/lib/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/lib/list/selection-list.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -300,8 +300,8 @@ export class MatListOption extends _MatListOptionMixinBase
300300
providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
301301
changeDetection: ChangeDetectionStrategy.OnPush
302302
})
303-
export class MatSelectionList extends _MatSelectionListMixinBase implements FocusableOption,
304-
CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
303+
export class MatSelectionList extends _MatSelectionListMixinBase implements CanDisableRipple,
304+
AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
305305

306306
/** The FocusKeyManager which handles focus. */
307307
_keyManager: FocusKeyManager<MatListOption>;
@@ -400,8 +400,8 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
400400
}
401401

402402
/** Focuses the last active list option. */
403-
focus() {
404-
this._element.nativeElement.focus();
403+
focus(options?: FocusOptions) {
404+
this._element.nativeElement.focus(options);
405405
}
406406

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

src/lib/menu/menu-item.ts

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

100100
/** Focuses the menu item. */
101-
focus(origin: FocusOrigin = 'program'): void {
101+
focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {
102102
if (this._focusMonitor) {
103-
this._focusMonitor.focusVia(this._getHostElement(), origin);
103+
this._focusMonitor.focusVia(this._getHostElement(), origin, options);
104104
} else {
105-
this._getHostElement().focus();
105+
this._getHostElement().focus(options);
106106
}
107107
}
108108

src/lib/menu/menu-trigger.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -255,11 +255,11 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
255255
* Focuses the menu trigger.
256256
* @param origin Source of the menu trigger's focus.
257257
*/
258-
focus(origin: FocusOrigin = 'program') {
258+
focus(origin: FocusOrigin = 'program', options?: FocusOptions) {
259259
if (this._focusMonitor) {
260-
this._focusMonitor.focusVia(this._element, origin);
260+
this._focusMonitor.focusVia(this._element, origin, options);
261261
} else {
262-
this._element.nativeElement.focus();
262+
this._element.nativeElement.focus(options);
263263
}
264264
}
265265

src/lib/radio/radio.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -478,8 +478,8 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
478478
}
479479

480480
/** Focuses the radio button. */
481-
focus(): void {
482-
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
481+
focus(options?: FocusOptions): void {
482+
this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
483483
}
484484

485485
/**

src/lib/select/select.ts

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

10251025
/** Focuses the select element. */
1026-
focus(): void {
1027-
this._elementRef.nativeElement.focus();
1026+
focus(options?: FocusOptions): void {
1027+
this._elementRef.nativeElement.focus(options);
10281028
}
10291029

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

src/lib/slide-toggle/slide-toggle.ts

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

282282
/** Focuses the slide-toggle. */
283-
focus(): void {
284-
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
283+
focus(options?: FocusOptions): void {
284+
this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
285285
}
286286

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

src/lib/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/lib/button-toggle.d.ts

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

tools/public_api_guard/lib/button.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export declare class MatButton extends _MatButtonMixinBase implements OnDestroy,
1616
_getHostElement(): any;
1717
_hasHostAttributes(...attributes: string[]): boolean;
1818
_isRippleDisabled(): boolean;
19-
focus(): void;
19+
focus(options?: FocusOptions): void;
2020
ngOnDestroy(): void;
2121
}
2222

tools/public_api_guard/lib/checkbox.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
3030
_onInputClick(event: Event): void;
3131
_onInteractionEvent(event: Event): void;
3232
_onLabelTextChange(): void;
33-
focus(): void;
33+
focus(options?: FocusOptions): void;
3434
ngAfterViewChecked(): void;
3535
ngOnDestroy(): void;
3636
registerOnChange(fn: (value: any) => void): void;

tools/public_api_guard/lib/chips.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges {
7373
_focus(): void;
7474
_keydown(event?: KeyboardEvent): void;
7575
_onInput(): void;
76-
focus(): void;
76+
focus(options?: FocusOptions): void;
7777
ngOnChanges(): void;
7878
}
7979

@@ -126,13 +126,13 @@ export declare class MatChipList extends _MatChipListMixinBase implements MatFor
126126
constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher,
127127
ngControl: NgControl);
128128
_blur(): void;
129-
_focusInput(): void;
129+
_focusInput(options?: FocusOptions): void;
130130
_keydown(event: KeyboardEvent): void;
131131
_markAsTouched(): void;
132132
_setSelectionByValue(value: any, isUserInput?: boolean): void;
133133
protected _updateFocusForDestroyedChips(): void;
134134
protected _updateTabIndex(): void;
135-
focus(): void;
135+
focus(options?: FocusOptions): void;
136136
ngAfterContentInit(): void;
137137
ngDoCheck(): void;
138138
ngOnDestroy(): void;

tools/public_api_guard/lib/core.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export declare class MatOption implements AfterViewChecked, OnDestroy {
249249
_handleKeydown(event: KeyboardEvent): void;
250250
_selectViaInteraction(): void;
251251
deselect(): void;
252-
focus(): void;
252+
focus(options?: FocusOptions): void;
253253
getLabel(): string;
254254
ngAfterViewChecked(): void;
255255
ngOnDestroy(): void;

tools/public_api_guard/lib/expansion.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export declare class MatExpansionPanelHeader implements OnDestroy, FocusableOpti
8181
_keydown(event: KeyboardEvent): void;
8282
_showToggle(): boolean;
8383
_toggle(): void;
84-
focus(origin?: FocusOrigin): void;
84+
focus(origin?: FocusOrigin, options?: FocusOptions): void;
8585
ngOnDestroy(): void;
8686
}
8787

tools/public_api_guard/lib/input.d.ts

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

tools/public_api_guard/lib/list.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export declare class MatNavList extends _MatListMixinBase implements CanDisableR
8181
ngOnDestroy(): void;
8282
}
8383

84-
export declare class MatSelectionList extends _MatSelectionListMixinBase implements FocusableOption, CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
84+
export declare class MatSelectionList extends _MatSelectionListMixinBase implements CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
8585
_keyManager: FocusKeyManager<MatListOption>;
8686
_onTouched: () => void;
8787
compareWith: (o1: any, o2: any) => boolean;
@@ -97,7 +97,7 @@ export declare class MatSelectionList extends _MatSelectionListMixinBase impleme
9797
_reportValueChange(): void;
9898
_setFocusedOption(option: MatListOption): void;
9999
deselectAll(): void;
100-
focus(): void;
100+
focus(options?: FocusOptions): void;
101101
ngAfterContentInit(): void;
102102
ngOnChanges(changes: SimpleChanges): void;
103103
ngOnDestroy(): void;

tools/public_api_guard/lib/menu.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export declare class MatMenuItem extends _MatMenuItemMixinBase implements Focusa
7474
_getHostElement(): HTMLElement;
7575
_getTabIndex(): string;
7676
_handleMouseEnter(): void;
77-
focus(origin?: FocusOrigin): void;
77+
focus(origin?: FocusOrigin, options?: FocusOptions): void;
7878
getLabel(): string;
7979
ngOnDestroy(): void;
8080
}
@@ -117,7 +117,7 @@ export declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
117117
_handleKeydown(event: KeyboardEvent): void;
118118
_handleMousedown(event: MouseEvent): void;
119119
closeMenu(): void;
120-
focus(origin?: FocusOrigin): void;
120+
focus(origin?: FocusOrigin, options?: FocusOptions): void;
121121
ngAfterContentInit(): void;
122122
ngOnDestroy(): void;
123123
openMenu(): void;

tools/public_api_guard/lib/radio.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export declare class MatRadioButton extends _MatRadioButtonMixinBase implements
2323
_markForCheck(): void;
2424
_onInputChange(event: Event): void;
2525
_onInputClick(event: Event): void;
26-
focus(): void;
26+
focus(options?: FocusOptions): void;
2727
ngAfterViewInit(): void;
2828
ngOnDestroy(): void;
2929
ngOnInit(): void;

tools/public_api_guard/lib/select.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
7878
_onBlur(): void;
7979
_onFocus(): void;
8080
close(): void;
81-
focus(): void;
81+
focus(options?: FocusOptions): void;
8282
ngAfterContentInit(): void;
8383
ngDoCheck(): void;
8484
ngOnChanges(changes: SimpleChanges): void;

tools/public_api_guard/lib/slide-toggle.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export declare class MatSlideToggle extends _MatSlideToggleMixinBase implements
2929
_onDragStart(): void;
3030
_onInputClick(event: Event): void;
3131
_onLabelTextChange(): void;
32-
focus(): void;
32+
focus(options?: FocusOptions): void;
3333
ngAfterContentInit(): void;
3434
ngOnDestroy(): void;
3535
registerOnChange(fn: any): void;

tools/public_api_guard/lib/slider.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
5050
_onSlideEnd(): void;
5151
_onSlideStart(event: HammerInput | null): void;
5252
blur(): void;
53-
focus(): void;
53+
focus(options?: FocusOptions): void;
5454
ngOnDestroy(): void;
5555
ngOnInit(): void;
5656
registerOnChange(fn: (value: any) => void): void;

0 commit comments

Comments
 (0)