Skip to content

refactor: allow options to be passed to focus methods #14184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 7, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/material/button-toggle/button-toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -519,8 +519,8 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
}

/** Focuses the button. */
focus(): void {
this._buttonElement.nativeElement.focus();
focus(options?: FocusOptions): void {
this._buttonElement.nativeElement.focus(options);
}

/** Checks the button toggle due to an interaction with the underlying native button. */
Expand Down
10 changes: 6 additions & 4 deletions src/material/button/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {FocusMonitor} from '@angular/cdk/a11y';
import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
import {
ChangeDetectionStrategy,
Component,
Expand Down Expand Up @@ -78,7 +78,7 @@ const _MatButtonMixinBase: CanDisableRippleCtor & CanDisableCtor & CanColorCtor
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatButton extends _MatButtonMixinBase
implements OnDestroy, CanDisable, CanColor, CanDisableRipple {
implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {

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

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

_getHostElement() {
Expand Down
9 changes: 5 additions & 4 deletions src/material/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {FocusMonitor} from '@angular/cdk/a11y';
import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {
Attribute,
Expand Down Expand Up @@ -127,7 +127,8 @@ const _MatCheckboxMixinBase:
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple,
FocusableOption {

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

/** Focuses the checkbox. */
focus(): void {
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
focus(origin: FocusOrigin = 'keyboard', options?: FocusOptions): void {
this._focusMonitor.focusVia(this._inputElement, origin, options);
}

_onInteractionEvent(event: Event) {
Expand Down
4 changes: 2 additions & 2 deletions src/material/chips/chip-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,8 +156,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
}

/** Focuses the input. */
focus(): void {
this._inputElement.focus();
focus(options?: FocusOptions): void {
this._inputElement.focus(options);
}

/** Checks whether a keycode is one of the configured separators. */
Expand Down
8 changes: 4 additions & 4 deletions src/material/chips/chip-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
* Focuses the first non-disabled chip in this chip list, or the associated input when there
* are no eligible chips.
*/
focus(): void {
focus(options?: FocusOptions): void {
if (this.disabled) {
return;
}
Expand All @@ -473,15 +473,15 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
this._keyManager.setFirstItemActive();
this.stateChanges.next();
} else {
this._focusInput();
this._focusInput(options);
this.stateChanges.next();
}
}

/** Attempt to focus an input if we have one. */
_focusInput() {
_focusInput(options?: FocusOptions) {
if (this._chipInput) {
this._chipInput.focus();
this._chipInput.focus(options);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/material/chips/chip-text-control.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@ export interface MatChipTextControl {
empty: boolean;

/** Focuses the text control. */
focus(): void;
focus(options?: FocusOptions): void;
}
9 changes: 6 additions & 3 deletions src/material/core/option/option.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
QueryList,
ViewEncapsulation,
} from '@angular/core';
import {FocusOptions, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
import {Subject} from 'rxjs';
import {MatOptgroup} from './optgroup';

Expand Down Expand Up @@ -84,7 +85,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatOption implements AfterViewChecked, OnDestroy {
export class MatOption implements FocusableOption, AfterViewChecked, OnDestroy {
private _selected = false;
private _active = false;
private _disabled = false;
Expand Down Expand Up @@ -161,11 +162,13 @@ export class MatOption implements AfterViewChecked, OnDestroy {
}

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

if (typeof element.focus === 'function') {
element.focus();
element.focus(options);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/material/expansion/expansion-panel-header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,8 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
* @param origin Origin of the action that triggered the focus.
* @docs-private
*/
focus(origin: FocusOrigin = 'program') {
this._focusMonitor.focusVia(this._element, origin);
focus(origin: FocusOrigin = 'program', options?: FocusOptions) {
this._focusMonitor.focusVia(this._element, origin, options);
}

ngOnDestroy() {
Expand Down
4 changes: 2 additions & 2 deletions src/material/input/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -310,8 +310,8 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
}

/** Focuses the input. */
focus(): void {
this._elementRef.nativeElement.focus();
focus(options?: FocusOptions): void {
this._elementRef.nativeElement.focus(options);
}

/** Callback for the cases where the focused state of the input changes. */
Expand Down
8 changes: 4 additions & 4 deletions src/material/list/selection-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -320,8 +320,8 @@ export class MatListOption extends _MatListOptionMixinBase
providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MatSelectionList extends _MatSelectionListMixinBase implements FocusableOption,
CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
export class MatSelectionList extends _MatSelectionListMixinBase implements CanDisableRipple,
AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {

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

/** Focuses the selection list. */
focus() {
this._element.nativeElement.focus();
focus(options?: FocusOptions) {
this._element.nativeElement.focus(options);
}

/** Selects all of the options. */
Expand Down
6 changes: 3 additions & 3 deletions src/material/menu/menu-item.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,11 @@ export class MatMenuItem extends _MatMenuItemMixinBase
}

/** Focuses the menu item. */
focus(origin: FocusOrigin = 'program'): void {
focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {
if (this._focusMonitor) {
this._focusMonitor.focusVia(this._getHostElement(), origin);
this._focusMonitor.focusVia(this._getHostElement(), origin, options);
} else {
this._getHostElement().focus();
this._getHostElement().focus(options);
}
}

Expand Down
6 changes: 3 additions & 3 deletions src/material/menu/menu-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -263,11 +263,11 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
* Focuses the menu trigger.
* @param origin Source of the menu trigger's focus.
*/
focus(origin: FocusOrigin = 'program') {
focus(origin: FocusOrigin = 'program', options?: FocusOptions) {
if (this._focusMonitor) {
this._focusMonitor.focusVia(this._element, origin);
this._focusMonitor.focusVia(this._element, origin, options);
} else {
this._element.nativeElement.focus();
this._element.nativeElement.focus(options);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/material/radio/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -511,8 +511,8 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
}

/** Focuses the radio button. */
focus(): void {
this._focusMonitor.focusVia(this._inputElement, 'keyboard');
focus(options?: FocusOptions): void {
this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
}

/**
Expand Down
4 changes: 2 additions & 2 deletions src/material/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1042,8 +1042,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
}

/** Focuses the select element. */
focus(): void {
this._elementRef.nativeElement.focus();
focus(options?: FocusOptions): void {
this._elementRef.nativeElement.focus(options);
}

/** Gets the index of the provided option in the option list. */
Expand Down
4 changes: 2 additions & 2 deletions src/material/slide-toggle/slide-toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,8 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
}

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

/** Toggles the checked state of the slide-toggle. */
Expand Down
8 changes: 4 additions & 4 deletions src/material/slider/slider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -295,8 +295,8 @@ export class MatSlider extends _MatSliderMixinBase
}

/** set focus to the host element */
focus() {
this._focusHostElement();
focus(options?: FocusOptions) {
this._focusHostElement(options);
}

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

/** Blurs the native element. */
Expand Down
2 changes: 1 addition & 1 deletion tools/public_api_guard/material/button-toggle.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export declare class MatButtonToggle extends _MatButtonToggleMixinBase implement
constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _focusMonitor: FocusMonitor, defaultTabIndex: string, defaultOptions?: MatButtonToggleDefaultOptions);
_markForCheck(): void;
_onButtonClick(): void;
focus(): void;
focus(options?: FocusOptions): void;
ngOnDestroy(): void;
ngOnInit(): void;
}
Expand Down
4 changes: 2 additions & 2 deletions tools/public_api_guard/material/button.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export declare class MatAnchor extends MatButton {
_haltDisabledEvents(event: Event): void;
}

export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple {
export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
_animationMode: string;
readonly isIconButton: boolean;
readonly isRoundButton: boolean;
Expand All @@ -13,7 +13,7 @@ export declare class MatButton extends _MatButtonMixinBase implements OnDestroy,
_getHostElement(): any;
_hasHostAttributes(...attributes: string[]): boolean;
_isRippleDisabled(): boolean;
focus(): void;
focus(_origin?: FocusOrigin, options?: FocusOptions): void;
ngOnDestroy(): void;
}

Expand Down
4 changes: 2 additions & 2 deletions tools/public_api_guard/material/checkbox.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;

export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;

export declare class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
export declare class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
_animationMode?: string | undefined;
_inputElement: ElementRef<HTMLInputElement>;
_onTouched: () => any;
Expand All @@ -31,7 +31,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
_onInputClick(event: Event): void;
_onInteractionEvent(event: Event): void;
_onLabelTextChange(): void;
focus(): void;
focus(origin?: FocusOrigin, options?: FocusOptions): void;
ngAfterViewChecked(): void;
ngOnDestroy(): void;
registerOnChange(fn: (value: any) => void): void;
Expand Down
6 changes: 3 additions & 3 deletions tools/public_api_guard/material/chips.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges {
_focus(): void;
_keydown(event?: KeyboardEvent): void;
_onInput(): void;
focus(): void;
focus(options?: FocusOptions): void;
ngOnChanges(): void;
}

Expand Down Expand Up @@ -120,13 +120,13 @@ export declare class MatChipList extends _MatChipListMixinBase implements MatFor
ngControl: NgControl);
_allowFocusEscape(): void;
_blur(): void;
_focusInput(): void;
_focusInput(options?: FocusOptions): void;
_keydown(event: KeyboardEvent): void;
_markAsTouched(): void;
_setSelectionByValue(value: any, isUserInput?: boolean): void;
protected _updateFocusForDestroyedChips(): void;
protected _updateTabIndex(): void;
focus(): void;
focus(options?: FocusOptions): void;
ngAfterContentInit(): void;
ngDoCheck(): void;
ngOnDestroy(): void;
Expand Down
4 changes: 2 additions & 2 deletions tools/public_api_guard/material/core.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ export declare class MatOptgroup extends _MatOptgroupMixinBase implements CanDis
label: string;
}

export declare class MatOption implements AfterViewChecked, OnDestroy {
export declare class MatOption implements FocusableOption, AfterViewChecked, OnDestroy {
readonly _stateChanges: Subject<void>;
readonly active: boolean;
readonly disableRipple: boolean | undefined;
Expand All @@ -245,7 +245,7 @@ export declare class MatOption implements AfterViewChecked, OnDestroy {
_handleKeydown(event: KeyboardEvent): void;
_selectViaInteraction(): void;
deselect(): void;
focus(): void;
focus(_origin?: FocusOrigin, options?: FocusOptions): void;
getLabel(): string;
ngAfterViewChecked(): void;
ngOnDestroy(): void;
Expand Down
2 changes: 1 addition & 1 deletion tools/public_api_guard/material/expansion.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export declare class MatExpansionPanelHeader implements OnDestroy, FocusableOpti
_keydown(event: KeyboardEvent): void;
_showToggle(): boolean;
_toggle(): void;
focus(origin?: FocusOrigin): void;
focus(origin?: FocusOrigin, options?: FocusOptions): void;
ngOnDestroy(): void;
}

Expand Down
2 changes: 1 addition & 1 deletion tools/public_api_guard/material/input.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export declare class MatInput extends _MatInputMixinBase implements MatFormField
protected _isTextarea(): boolean;
_onInput(): void;
protected _validateType(): void;
focus(): void;
focus(options?: FocusOptions): void;
ngDoCheck(): void;
ngOnChanges(): void;
ngOnDestroy(): void;
Expand Down
Loading