From 62136c16c40e1d96905da48c3593d9ad6b5ce440 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 11 Sep 2018 19:42:20 +0200 Subject: [PATCH] refactor(focus-monitor): accept ElementRef in focusVia (#12978) 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 1ad9c66d493..938184eb767 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 ff46c7d0aee..354710d5c6f 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 85f68416f61..387725bb124 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 6aa35b41a9e..0555ed61791 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 2569fa56b0a..97b0c0779ba 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 ca9677baa3e..61dcb6cd2c5 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 ab80a9fc1f3..38991f6b6b4 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);