From ab74bea584510d2e0f0369dfe0ade6149c813da2 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 4 Sep 2018 23:01:37 +0200 Subject: [PATCH] refactor(focus-monitor): accept ElementRef in focusVia Looks like something that was missed in #12712. For consistency with `monitor` and `stopMonitoring`, accepts an `ElementRef` in `focusVia`. --- src/cdk/a11y/focus-monitor/focus-monitor.ts | 21 ++++++++++++++++--- src/lib/checkbox/checkbox.ts | 2 +- src/lib/expansion/expansion-panel-header.ts | 4 ++-- src/lib/menu/menu-trigger.ts | 2 +- src/lib/radio/radio.ts | 2 +- src/lib/slide-toggle/slide-toggle.ts | 2 +- .../kitchen-sink/kitchen-sink.ts | 2 +- 7 files changed, 25 insertions(+), 10 deletions(-) diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.ts b/src/cdk/a11y/focus-monitor/focus-monitor.ts index 1ad9c66d4930..938184eb767e 100644 --- a/src/cdk/a11y/focus-monitor/focus-monitor.ts +++ b/src/cdk/a11y/focus-monitor/focus-monitor.ts @@ -173,13 +173,28 @@ export class FocusMonitor implements OnDestroy { * @param origin Focus origin. * @param options Options that can be used to configure the focus behavior. */ - focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void { + focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void; + + /** + * Focuses the element via the specified focus origin. + * @param element Element to focus. + * @param origin Focus origin. + * @param options Options that can be used to configure the focus behavior. + */ + focusVia(element: ElementRef, origin: FocusOrigin, options?: FocusOptions): void; + + focusVia(element: HTMLElement | ElementRef, + origin: FocusOrigin, + options?: FocusOptions): void { + + const nativeElement = this._getNativeElement(element); + this._setOriginForCurrentEventQueue(origin); // `focus` isn't available on the server - if (typeof element.focus === 'function') { + if (typeof nativeElement.focus === 'function') { // Cast the element to `any`, because the TS typings don't have the `options` parameter yet. - (element as any).focus(options); + (nativeElement as any).focus(options); } } diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index ff46c7d0aee6..354710d5c6ff 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -410,7 +410,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc /** Focuses the checkbox. */ focus(): void { - this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); + this._focusMonitor.focusVia(this._inputElement, 'keyboard'); } _onInteractionEvent(event: Event) { diff --git a/src/lib/expansion/expansion-panel-header.ts b/src/lib/expansion/expansion-panel-header.ts index 85f68416f617..387725bb1249 100644 --- a/src/lib/expansion/expansion-panel-header.ts +++ b/src/lib/expansion/expansion-panel-header.ts @@ -86,7 +86,7 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption { // Avoids focus being lost if the panel contained the focused element and was closed. panel.closed .pipe(filter(() => panel._containsFocus())) - .subscribe(() => _focusMonitor.focusVia(_element.nativeElement, 'program')); + .subscribe(() => _focusMonitor.focusVia(_element, 'program')); _focusMonitor.monitor(_element).subscribe(origin => { if (origin && panel.accordion) { @@ -158,7 +158,7 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption { * @docs-private */ focus(origin: FocusOrigin = 'program') { - this._focusMonitor.focusVia(this._element.nativeElement, origin); + this._focusMonitor.focusVia(this._element, origin); } ngOnDestroy() { diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 6aa35b41a9ed..0555ed61791d 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -224,7 +224,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { */ focus(origin: FocusOrigin = 'program') { if (this._focusMonitor) { - this._focusMonitor.focusVia(this._element.nativeElement, origin); + this._focusMonitor.focusVia(this._element, origin); } else { this._element.nativeElement.focus(); } diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 2569fa56b0a3..97b0c0779ba6 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -491,7 +491,7 @@ export class MatRadioButton extends _MatRadioButtonMixinBase /** Focuses the radio button. */ focus(): void { - this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); + this._focusMonitor.focusVia(this._inputElement, 'keyboard'); } /** diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index ca9677baa3ea..61dcb6cd2c5d 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -279,7 +279,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro /** Focuses the slide-toggle. */ focus(): void { - this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); + this._focusMonitor.focusVia(this._inputElement, 'keyboard'); } /** Toggles the checked state of the slide-toggle. */ diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index ab80a9fc1f3f..38991f6b6b4c 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -84,7 +84,7 @@ export class KitchenSink { focusMonitor: FocusMonitor, elementRef: ElementRef, bottomSheet: MatBottomSheet) { - focusMonitor.focusVia(elementRef.nativeElement, 'program'); + focusMonitor.focusVia(elementRef, 'program'); snackBar.open('Hello there'); dialog.open(TestEntryComponent); bottomSheet.open(TestEntryComponent);