diff --git a/src/demo-app/style/style-demo.html b/src/demo-app/style/style-demo.html index a3aee1f7bb3f..66c6ad6641dd 100644 --- a/src/demo-app/style/style-demo.html +++ b/src/demo-app/style/style-demo.html @@ -2,6 +2,7 @@ + diff --git a/src/demo-app/style/style-demo.scss b/src/demo-app/style/style-demo.scss index a04570ce0dee..95b98232e98f 100644 --- a/src/demo-app/style/style-demo.scss +++ b/src/demo-app/style/style-demo.scss @@ -13,3 +13,7 @@ .demo-button.cdk-program-focused { background: blue; } + +.demo-button.cdk-touch-focused { + background: purple; +} diff --git a/src/lib/core/style/focus-classes.spec.ts b/src/lib/core/style/focus-classes.spec.ts index 2ef8c0e9fd9c..02cd142a7507 100644 --- a/src/lib/core/style/focus-classes.spec.ts +++ b/src/lib/core/style/focus-classes.spec.ts @@ -3,7 +3,7 @@ import {Component, Renderer, ViewChild} from '@angular/core'; import {StyleModule} from './index'; import {By} from '@angular/platform-browser'; import {TAB} from '../keyboard/keycodes'; -import {FocusOriginMonitor, FocusOrigin, CdkFocusClasses} from './focus-classes'; +import {FocusOriginMonitor, FocusOrigin, CdkFocusClasses, TOUCH_BUFFER_MS} from './focus-classes'; describe('FocusOriginMonitor', () => { let fixture: ComponentFixture; @@ -73,7 +73,7 @@ describe('FocusOriginMonitor', () => { it('should detect focus via mouse', async(() => { // Simulate focus via mouse. - dispatchMousedownEvent(document); + dispatchMousedownEvent(buttonElement); buttonElement.focus(); fixture.detectChanges(); @@ -90,6 +90,25 @@ describe('FocusOriginMonitor', () => { }, 0); })); + it('should detect focus via touch', async(() => { + // Simulate focus via touch. + dispatchTouchstartEvent(buttonElement); + buttonElement.focus(); + fixture.detectChanges(); + + setTimeout(() => { + fixture.detectChanges(); + + expect(buttonElement.classList.length) + .toBe(2, 'button should have exactly 2 focus classes'); + expect(buttonElement.classList.contains('cdk-focused')) + .toBe(true, 'button should have cdk-focused class'); + expect(buttonElement.classList.contains('cdk-touch-focused')) + .toBe(true, 'button should have cdk-touch-focused class'); + expect(changeHandler).toHaveBeenCalledWith('touch'); + }, TOUCH_BUFFER_MS); + })); + it('should detect programmatic focus', async(() => { // Programmatically focus. buttonElement.focus(); @@ -142,6 +161,23 @@ describe('FocusOriginMonitor', () => { }, 0); })); + it('focusVia mouse should simulate mouse focus', async(() => { + focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'touch'); + fixture.detectChanges(); + + setTimeout(() => { + fixture.detectChanges(); + + expect(buttonElement.classList.length) + .toBe(2, 'button should have exactly 2 focus classes'); + expect(buttonElement.classList.contains('cdk-focused')) + .toBe(true, 'button should have cdk-focused class'); + expect(buttonElement.classList.contains('cdk-touch-focused')) + .toBe(true, 'button should have cdk-touch-focused class'); + expect(changeHandler).toHaveBeenCalledWith('touch'); + }, 0); + })); + it('focusVia program should simulate programmatic focus', async(() => { focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'program'); fixture.detectChanges(); @@ -234,7 +270,7 @@ describe('cdkFocusClasses', () => { it('should detect focus via mouse', async(() => { // Simulate focus via mouse. - dispatchMousedownEvent(document); + dispatchMousedownEvent(buttonElement); buttonElement.focus(); fixture.detectChanges(); @@ -251,6 +287,25 @@ describe('cdkFocusClasses', () => { }, 0); })); + it('should detect focus via touch', async(() => { + // Simulate focus via touch. + dispatchTouchstartEvent(buttonElement); + buttonElement.focus(); + fixture.detectChanges(); + + setTimeout(() => { + fixture.detectChanges(); + + expect(buttonElement.classList.length) + .toBe(2, 'button should have exactly 2 focus classes'); + expect(buttonElement.classList.contains('cdk-focused')) + .toBe(true, 'button should have cdk-focused class'); + expect(buttonElement.classList.contains('cdk-touch-focused')) + .toBe(true, 'button should have cdk-touch-focused class'); + expect(changeHandler).toHaveBeenCalledWith('touch'); + }, TOUCH_BUFFER_MS); + })); + it('should detect programmatic focus', async(() => { // Programmatically focus. buttonElement.focus(); @@ -312,6 +367,13 @@ function dispatchMousedownEvent(element: Node) { element.dispatchEvent(event); } +/** Dispatches a mousedown event on the specified element. */ +function dispatchTouchstartEvent(element: Node) { + let event = document.createEvent('MouseEvent'); + event.initMouseEvent( + 'touchstart', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); + element.dispatchEvent(event); +} /** Dispatches a keydown event on the specified element. */ function dispatchKeydownEvent(element: Node, keyCode: number) { diff --git a/src/lib/core/style/focus-classes.ts b/src/lib/core/style/focus-classes.ts index e8f0057f0ff7..9eefdf85dbc9 100644 --- a/src/lib/core/style/focus-classes.ts +++ b/src/lib/core/style/focus-classes.ts @@ -3,7 +3,12 @@ import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; -export type FocusOrigin = 'mouse' | 'keyboard' | 'program'; +// This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found +// that a value of around 650ms seems appropriate. +export const TOUCH_BUFFER_MS = 650; + + +export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program'; /** Monitors mouse and keyboard events to determine the cause of focus events. */ @@ -18,14 +23,40 @@ export class FocusOriginMonitor { /** Whether the window has just been focused. */ private _windowFocused = false; + /** The target of the last touch event. */ + private _lastTouchTarget: EventTarget; + + /** The timeout id of the touch timeout, used to cancel timeout later. */ + private _touchTimeout: number; + constructor() { - // Listen to keydown and mousedown in the capture phase so we can detect them even if the user - // stops propagation. - // TODO(mmalerba): Figure out how to handle touchstart - document.addEventListener( - 'keydown', () => this._setOriginForCurrentEventQueue('keyboard'), true); - document.addEventListener( - 'mousedown', () => this._setOriginForCurrentEventQueue('mouse'), true); + // Note: we listen to events in the capture phase so we can detect them even if the user stops + // propagation. + + // On keydown record the origin and clear any touch event that may be in progress. + document.addEventListener('keydown', () => { + this._lastTouchTarget = null; + this._setOriginForCurrentEventQueue('keyboard'); + }, true); + + // On mousedown record the origin only if there is not touch target, since a mousedown can + // happen as a result of a touch event. + document.addEventListener('mousedown', () => { + if (!this._lastTouchTarget) { + this._setOriginForCurrentEventQueue('mouse'); + } + }, true); + + // When the touchstart event fires the focus event is not yet in the event queue. This means we + // can't rely on the trick used above (setting timeout of 0ms). Instead we wait 650ms to see if + // a focus happens. + document.addEventListener('touchstart', (event: Event) => { + if (this._touchTimeout != null) { + clearTimeout(this._touchTimeout); + } + this._lastTouchTarget = event.target; + this._touchTimeout = setTimeout(() => this._lastTouchTarget = null, TOUCH_BUFFER_MS); + }, true); // Make a note of when the window regains focus, so we can restore the origin info for the // focused element. @@ -38,7 +69,8 @@ export class FocusOriginMonitor { /** Register an element to receive focus classes. */ registerElementForFocusClasses(element: Element, renderer: Renderer): Observable { let subject = new Subject(); - renderer.listen(element, 'focus', () => this._onFocus(element, renderer, subject)); + renderer.listen(element, 'focus', + (event: Event) => this._onFocus(event, element, renderer, subject)); renderer.listen(element, 'blur', () => this._onBlur(element, renderer, subject)); return subject.asObservable(); } @@ -55,27 +87,56 @@ export class FocusOriginMonitor { setTimeout(() => this._origin = null, 0); } + /** Checks whether the given focus event was caused by a touchstart event. */ + private _wasCausedByTouch(event: Event): boolean { + // Note(mmalerba): This implementation is not quite perfect, there is a small edge case. + // Consider the following dom structure: + // + //
+ //
+ //
+ // + // If the user touches the #child element and the #parent is programmatically focused as a + // result, this code will still consider it to have been caused by the touch event and will + // apply the cdk-touch-focused class rather than the cdk-program-focused class. This is a + // relatively small edge-case that can be worked around by using + // focusVia(parentEl, renderer, 'program') to focus the parent element. + // + // If we decide that we absolutely must handle this case correctly, we can do so by listening + // for the first focus event after the touchstart, and then the first blur event after that + // focus event. When that blur event fires we know that whatever follows is not a result of the + // touchstart. + let focusTarget = event.target; + return this._lastTouchTarget instanceof Node && focusTarget instanceof Node && + (focusTarget == this._lastTouchTarget || focusTarget.contains(this._lastTouchTarget)); + } + /** Handles focus events on a registered element. */ - private _onFocus(element: Element, renderer: Renderer, subject: Subject) { + private _onFocus(event: Event, element: Element, renderer: Renderer, + subject: Subject) { // If we couldn't detect a cause for the focus event, it's due to one of two reasons: // 1) The window has just regained focus, in which case we want to restore the focused state of // the element from before the window blurred. - // 2) The element was programmatically focused, in which case we should mark the origin as + // 2) It was caused by a touch event, in which case we mark the origin as 'touch'. + // 3) The element was programmatically focused, in which case we should mark the origin as // 'program'. if (!this._origin) { if (this._windowFocused && this._lastFocusOrigin) { this._origin = this._lastFocusOrigin; + } else if (this._wasCausedByTouch(event)) { + this._origin = 'touch'; } else { this._origin = 'program'; } } renderer.setElementClass(element, 'cdk-focused', true); + renderer.setElementClass(element, 'cdk-touch-focused', this._origin == 'touch'); renderer.setElementClass(element, 'cdk-keyboard-focused', this._origin == 'keyboard'); renderer.setElementClass(element, 'cdk-mouse-focused', this._origin == 'mouse'); renderer.setElementClass(element, 'cdk-program-focused', this._origin == 'program'); - subject.next(this._origin); + this._lastFocusOrigin = this._origin; this._origin = null; } @@ -83,6 +144,7 @@ export class FocusOriginMonitor { /** Handles blur events on a registered element. */ private _onBlur(element: Element, renderer: Renderer, subject: Subject) { renderer.setElementClass(element, 'cdk-focused', false); + renderer.setElementClass(element, 'cdk-touch-focused', false); renderer.setElementClass(element, 'cdk-keyboard-focused', false); renderer.setElementClass(element, 'cdk-mouse-focused', false); renderer.setElementClass(element, 'cdk-program-focused', false);