feat(material/slide-toggle): allow origin to be optional input in foc…

…us method (#20913) Co-authored-by: Jessica Xu <jessicacxu@google.com>
angular · Nov 6, 2020 · a0d4ce3 · a0d4ce3
1 parent 1ae8f6b
commit a0d4ce3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts
@@ -1,6 +1,6 @@
 import {MutationObserverFactory} from '@angular/cdk/observers';
 import {dispatchFakeEvent} from '@angular/cdk/testing/private';
-import {Component} from '@angular/core';
+import {Component, DebugElement} from '@angular/core';
 import {
   ComponentFixture,
   fakeAsync,
@@ -731,15 +731,18 @@ describe('MatSlideToggle with forms', () => {
     let fixture: ComponentFixture<SlideToggleWithFormControl>;
 
     let testComponent: SlideToggleWithFormControl;
+    let slideToggleDebug: DebugElement;
     let slideToggle: MatSlideToggle;
     let inputElement: HTMLInputElement;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SlideToggleWithFormControl);
       fixture.detectChanges();
 
+      slideToggleDebug = fixture.debugElement.query(By.directive(MatSlideToggle))!;
+
       testComponent = fixture.debugElement.componentInstance;
-      slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle))!.componentInstance;
+      slideToggle = slideToggleDebug.componentInstance;
       inputElement = fixture.debugElement.query(By.css('input'))!.nativeElement;
     });
 
@@ -759,6 +762,15 @@ describe('MatSlideToggle with forms', () => {
       expect(slideToggle.disabled).toBe(false);
       expect(inputElement.disabled).toBe(false);
     });
+
+    it('should not change focus origin if origin not specified', () => {
+      slideToggle.focus(undefined, 'mouse');
+      slideToggle.focus();
+      fixture.detectChanges();
+
+      expect(slideToggleDebug.nativeElement.classList).toContain('cdk-focused');
+      expect(slideToggleDebug.nativeElement.classList).toContain('cdk-mouse-focused');
+    });
   });
 
   describe('with form element', () => {

diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusMonitor} from '@angular/cdk/a11y';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {
   AfterContentInit,
@@ -253,8 +253,12 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   }
 
   /** Focuses the slide-toggle. */
-  focus(options?: FocusOptions): void {
-    this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
+  focus(options?: FocusOptions, origin?: FocusOrigin): void {
+    if (origin) {
+      this._focusMonitor.focusVia(this._inputElement, origin, options);
+    } else {
+      this._inputElement.nativeElement.focus(options);
+    }
   }
 
   /** Toggles the checked state of the slide-toggle. */

diff --git a/tools/public_api_guard/material/slide-toggle.d.ts b/tools/public_api_guard/material/slide-toggle.d.ts
@@ -31,7 +31,7 @@ export declare class MatSlideToggle extends _MatSlideToggleMixinBase implements
     _onChangeEvent(event: Event): void;
     _onInputClick(event: Event): void;
     _onLabelTextChange(): void;
-    focus(options?: FocusOptions): void;
+    focus(options?: FocusOptions, origin?: FocusOrigin): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     registerOnChange(fn: any): void;