feat(popover-edit): allow tabbing from popup to next/previous cell

Author: kseamon

src/cdk-experimental/popover-edit/edit-event-dispatcher.ts

@@ -12,6 +12,7 @@ import {audit, distinctUntilChanged, filter, map, share} from 'rxjs/operators';
 
 import {CELL_SELECTOR, ROW_SELECTOR} from './constants';
 import {closest} from './polyfill';
+import {EditRef} from './edit-ref';
 
 /** The delay between mouse out events and hiding hover content. */
 const DEFAULT_MOUSE_OUT_DELAY_MS = 30;
@@ -30,6 +31,12 @@ export class EditEventDispatcher {
   /** A subject that emits mouse move events for table rows. */
   readonly mouseMove = new Subject<Element|null>();
 
+  /** The EditRef for the currently active edit lens (if any). */
+  get editRef(): EditRef<any>|null {
+    return this._editRef;
+  }
+  private _editRef: EditRef<any>|null = null;
+
   /** The table cell that has an active edit lens (or null). */
   private _currentlyEditing: Element|null = null;
 
@@ -67,6 +74,20 @@ export class EditEventDispatcher {
     }
   }
 
+  /** Sets the currently active EditRef. */
+  setActiveEditRef(ref: EditRef<any>) {
+    this._editRef = ref;
+  }
+
+  /** Unsets the currently active EditRef, if the specified editRef is active. */
+  unsetActiveEditRef(ref: EditRef<any>) {
+    if (this._editRef !== ref) {
+      return;
+    }
+
+    this._editRef = null;
+  }
+
   /**
    * Gets an Observable that emits true when the specified element's row
    * is being hovered over and false when not. Hovering is defined as when

src/cdk-experimental/popover-edit/edit-ref.ts

@@ -23,6 +23,10 @@ export class EditRef<FormValue> implements OnDestroy {
   private readonly _finalValueSubject = new Subject<FormValue>();
   readonly finalValue: Observable<FormValue> = this._finalValueSubject.asObservable();
 
+  /** Emits when the user tabs out of this edit lens before closing. */
+  private readonly _blurredSubject = new Subject<void>();
+  readonly blurred: Observable<void> = this._blurredSubject.asObservable();
+
   /** The value to set the form back to on revert. */
   private _revertFormValue: FormValue;
 
@@ -37,7 +41,9 @@ export class EditRef<FormValue> implements OnDestroy {
 
   constructor(
       @Self() private readonly _form: ControlContainer,
-      private readonly _editEventDispatcher: EditEventDispatcher) {}
+      private readonly _editEventDispatcher: EditEventDispatcher) {
+    this._editEventDispatcher.setActiveEditRef(this);
+  }
 
   /**
    * Called by the host directive's OnInit hook. Reads the initial state of the
@@ -57,6 +63,7 @@ export class EditRef<FormValue> implements OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this._editEventDispatcher.unsetActiveEditRef(this);
     this._finalValueSubject.next(this._form.value);
     this._finalValueSubject.complete();
   }
@@ -76,6 +83,11 @@ export class EditRef<FormValue> implements OnDestroy {
     this._editEventDispatcher.editing.next(null);
   }
 
+  /** Notifies the active edit that the user has moved focus out of the lens. */
+  blur(): void {
+    this._blurredSubject.next();
+  }
+
   /**
    * Closes the edit if the enter key is not down.
    * Otherwise, sets _closePending to true so that the edit will close on the

src/cdk-experimental/popover-edit/focus-escape-notifier.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Inject, Injectable, NgZone} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {FocusTrap, InteractivityChecker} from '@angular/cdk/a11y';
+import {Observable, Subject} from 'rxjs';
+
+/** Value indicating whether focus left the target area before or after the enclosed elements. */
+export const enum FocusEscapeNotifierDirection {
+  START,
+  END,
+}
+
+/**
+ * Like FocusTrap, but rather than trapping focus within a dom region, notifies subscribers when
+ * focus leaves the region.
+ */
+export class FocusEscapeNotifier extends FocusTrap {
+  private _escapeSubject = new Subject<FocusEscapeNotifierDirection>();
+
+  constructor(
+      element: HTMLElement,
+      checker: InteractivityChecker,
+      ngZone: NgZone,
+      document: Document) {
+    super(element, checker, ngZone, document, true /* deferAnchors */);
+
+    // The focus trap adds "anchors" at the beginning and end of a trapped region that redirect
+    // focus. We override that redirect behavior here with simply emitting on a stream.
+    this.startAnchorListener = () => {
+      this._escapeSubject.next(FocusEscapeNotifierDirection.START);
+      return true;
+    };
+    this.endAnchorListener = () => {
+      this._escapeSubject.next(FocusEscapeNotifierDirection.END);
+      return true;
+    };
+
+    this.attachAnchors();
+  }
+
+  escapes(): Observable<FocusEscapeNotifierDirection> {
+    return this._escapeSubject.asObservable();
+  }
+}
+
+/** Factory that allows easy instantiation of focus escape notifiers. */
+@Injectable({providedIn: 'root'})
+export class FocusEscapeNotifierFactory {
+  private _document: Document;
+
+  constructor(
+      private _checker: InteractivityChecker,
+      private _ngZone: NgZone,
+      @Inject(DOCUMENT) _document: any) {
+
+    this._document = _document;
+  }
+
+  /**
+   * Creates a focus escape notifier region around the given element.
+   * @param element The element around which focus will be monitored.
+   * @returns The created focus escape notifier instance.
+   */
+  create(element: HTMLElement): FocusEscapeNotifier {
+    return new FocusEscapeNotifier(element, this._checker, this._ngZone, this._document);
+  }
+}

src/cdk-experimental/popover-edit/lens-directives.ts

@@ -61,6 +61,7 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
   ngOnInit(): void {
     this.editRef.init(this.preservedFormValue);
     this.editRef.finalValue.subscribe(this.preservedFormValueChange);
+    this.editRef.blurred.subscribe(() => this._handleBlur());
   }
 
   ngOnDestroy(): void {
@@ -97,7 +98,7 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
     switch (this.clickOutBehavior) {
       case 'submit':
         // Manually cause the form to submit before closing.
-        this.elementRef.nativeElement!.dispatchEvent(new Event('submit'));
+        this._triggerFormSubmit();
         // Fall through
       case 'close':
         this.editRef.close();
@@ -106,6 +107,18 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
         break;
     }
   }
+
+  /** Triggers submit on tab out if clickOutBehavior is 'submit'. */
+  private _handleBlur(): void {
+    if (this.clickOutBehavior === 'submit') {
+      // Manually cause the form to submit before closing.
+      this._triggerFormSubmit();
+    }
+  }
+
+  private _triggerFormSubmit() {
+    this.elementRef.nativeElement!.dispatchEvent(new Event('submit'));
+  }
 }
 
 /** Reverts the form to its initial or previously submitted state on click. */

src/cdk-experimental/popover-edit/popover-edit-module.ts

@@ -10,6 +10,7 @@ import {NgModule} from '@angular/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
   CdkPopoverEdit,
+  CdkPopoverEditTabOut,
   CdkRowHoverContent,
   CdkEditable,
   CdkEditOpen,
@@ -26,6 +27,7 @@ import {
 
 const EXPORTED_DECLARATIONS = [
   CdkPopoverEdit,
+  CdkPopoverEditTabOut,
   CdkRowHoverContent,
   CdkEditControl,
   CdkEditRevert,