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,9 @@ 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). */
+  editRef: EditRef<any> | null = null;
+
   /** The table cell that has an active edit lens (or null). */
   private _currentlyEditing: Element|null = null;
 

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.editRef = 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.editRef = null;
     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,72 @@
+/**
+ * @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 */);
+
+    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,

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

@@ -26,6 +26,11 @@ import {debounceTime, filter, map, mapTo, startWith, takeUntil} from 'rxjs/opera
 import {CELL_SELECTOR, EDIT_PANE_CLASS, EDIT_PANE_SELECTOR, ROW_SELECTOR} from './constants';
 import {EditEventDispatcher} from './edit-event-dispatcher';
 import {FocusDispatcher} from './focus-dispatcher';
+import {
+  FocusEscapeNotifier,
+  FocusEscapeNotifierDirection,
+  FocusEscapeNotifierFactory
+} from './focus-escape-notifier';
 import {closest} from './polyfill';
 import {PopoverEditPositionStrategyFactory} from './popover-edit-position-strategy-factory';
 
@@ -112,7 +117,7 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
  * Makes the cell focusable.
  */
 @Directive({
-  selector: '[cdkPopoverEdit]',
+  selector: '[cdkPopoverEdit]:not([cdkPopoverEditTabOut])',
   host: {
     'tabIndex': '0',
     'class': 'cdk-popover-edit-cell',
@@ -179,6 +184,14 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
     }
   }
 
+  protected initFocusTrap(): void {
+    this.focusTrap = this.focusTrapFactory.create(this.overlayRef!.overlayElement);
+  }
+
+  protected closeEditOverlay(): void {
+    this.editEventDispatcher.doneEditingCell(this.elementRef.nativeElement!);
+  }
+
   private _startListeningToEditEvents(): void {
     this.editEventDispatcher.editingCell(this.elementRef.nativeElement!)
         .pipe(takeUntil(this.destroyed))
@@ -207,12 +220,10 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
       scrollStrategy: this.overlay.scrollStrategies.reposition(),
     });
 
-    this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
+    this.initFocusTrap();
     this.overlayRef.overlayElement.setAttribute('aria-role', 'dialog');
 
-    this.overlayRef.detachments().subscribe(() => {
-      this.editEventDispatcher.doneEditingCell(this.elementRef.nativeElement!);
-    });
+    this.overlayRef.detachments().subscribe(() => this.closeEditOverlay());
   }
 
   private _showEditOverlay(): void {
@@ -266,6 +277,60 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   }
 }
 
+/**
+ * Attaches an ng-template to a cell and shows it when instructed to by the
+ * EditEventDispatcher service.
+ * Makes the cell focusable.
+ */
+@Directive({
+  selector: '[cdkPopoverEdit] [cdkPopoverEditTabOut]',
+  host: {
+    'tabIndex': '0',
+    'class': 'cdk-popover-edit-cell',
+    '[attr.aria-haspopup]': 'true',
+  }
+})
+export class CdkPopoverEditTabOut<C> extends CdkPopoverEdit<C> {
+  protected focusTrap?: FocusEscapeNotifier;
+
+  constructor(
+      editEventDispatcher: EditEventDispatcher,
+      elementRef: ElementRef,
+      focusTrapFactory: FocusTrapFactory,
+      ngZone: NgZone,
+      overlay: Overlay,
+      positionFactory: PopoverEditPositionStrategyFactory,
+      scrollDispatcher: ScrollDispatcher,
+      viewContainerRef: ViewContainerRef,
+      viewportRuler: ViewportRuler,
+      protected readonly focusEscapeNotifierFactory: FocusEscapeNotifierFactory,
+      protected readonly focusDispatcher: FocusDispatcher) {
+    super(
+        editEventDispatcher,
+        elementRef,
+        focusTrapFactory,
+        ngZone,
+        overlay,
+        positionFactory,
+        scrollDispatcher,
+        viewContainerRef,
+        viewportRuler);
+  }
+
+  protected initFocusTrap(): void {
+    this.focusTrap = this.focusEscapeNotifierFactory.create(this.overlayRef!.overlayElement);
+
+    this.focusTrap.escapes().pipe(takeUntil(this.destroyed)).subscribe(direction => {
+      this.editEventDispatcher.editRef!.blur();
+      this.focusDispatcher.moveFocusHorizontally(
+          closest(this.elementRef.nativeElement!, CELL_SELECTOR) as HTMLElement,
+          direction === FocusEscapeNotifierDirection.START ? -1 : 1);
+
+      this.closeEditOverlay();
+    });
+  }
+}
+
 /**
  * A structural directive that shows its contents when the table row containing
  * it is hovered.

src/material-examples/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.css

@@ -0,0 +1,13 @@
+.example-table {
+  width: 100%;
+}
+
+.example-table th {
+  text-align: left;
+}
+
+.example-table td,
+.example-table th {
+  min-width: 300px;
+  width: 25%;
+}

src/material-examples/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.html

@@ -0,0 +1,56 @@
+<table editable class="example-table">
+  <!--
+    This edit lens is specified outside of the cell and must explicitly declare
+    its context. It could be reused in multiple cells.
+  -->
+  <ng-template #weightEdit let-element>
+    <div style="background-color: white; width: 100%">
+      <form #f="ngForm"
+          cdkEditControl
+          cdkEditControlClickOutBehavior="submit"
+          (ngSubmit)="onSubmitWeight(element, f)"
+          [cdkEditControlPreservedFormValue]="preservedWeightValues.get(element)"
+          (cdkEditControlPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
+        <input type="number" [ngModel]="element.weight" name="weight" required>
+      </form>
+    </div>
+  </ng-template>
+  
+  <tr>
+    <th> No. </th>
+    <th> Name </th>
+    <th> Weight </th>
+    <th> Symbol </th>
+  </tr>
+  
+  <tr *ngFor="let element of elements">
+    <td> {{element.position}} </td>
+    
+    <td [cdkPopoverEdit]="nameEdit" cdkPopoverEditTabOut cdkEditOpen>
+      {{element.name}}
+      
+      <!-- This edit is defined in the cell and can implicitly access element -->
+      <ng-template #nameEdit>
+        <div style="background-color: white; width: 100%">
+          <form #f="ngForm"
+              cdkEditControl
+              cdkEditControlClickOutBehavior="submit"
+              (ngSubmit)="onSubmitName(element, f)"
+              [cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
+              (cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
+            <input [ngModel]="element.name" name="name" required>
+            <br>
+            <button type="submit">Confirm</button>
+          </form>
+        </div>
+      </ng-template>
+    </td>
+
+    <td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element"
+        cdkPopoverEditTabOut cdkEditOpen>
+      {{element.weight}}
+    </td>
+
+    <td> {{element.symbol}} </td>
+  </tr>
+</table>