cleanup

Author: kseamon

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

@@ -12,7 +12,8 @@ export const CELL_SELECTOR = '.cdk-popover-edit-cell, .mat-popover-edit-cell';
 /** Selector for finding table rows. */
 export const ROW_SELECTOR = '.cdk-row, .mat-row, tr';
 
-export const TABLE_SELECOR = 'table, cdk-table, mat-table';
+/** Selector for finding the table element. */
+export const TABLE_SELECTOR = 'table, cdk-table, mat-table';
 
 /** CSS class added to the edit lens pane. */
 export const EDIT_PANE_CLASS = 'cdk-edit-pane';

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

@@ -13,40 +13,63 @@ import {PartialObserver} from 'rxjs';
 import {CELL_SELECTOR, ROW_SELECTOR, TABLE_SELECTOR} from './constants';
 import {closest} from './polyfill';
 
-/** Service responsible for moving cell focus around in response to keyboard events. */
-@Injectable()
+/**
+ * Service responsible for moving cell focus around in response to keyboard events.
+ * May be overridden to customize the keyboard behavior of popover edit.
+ */
+@Injectable({providedIn: 'root'})
 export class FocusDispatcher {
+  /** Observes keydown events triggered from the table. */
   readonly keyObserver: PartialObserver<KeyboardEvent>;
 
-  constructor(private readonly _directionality: Directionality) {
-    this.keyObserver = {next: (evt) => this.handleKey(evt)};
+  constructor(protected readonly directionality: Directionality) {
+    this.keyObserver = {next: (evt) => this.handleKeyboardEvent(evt)};
   }
 
-  moveFocusHorizontally(currentCell, offset: number) {
-    const allCells =
-        Array.from(closest(currentCell, TABLE_SELECTOR).querySelectorAll(CELL_SELECTOR));
-    const currentIndex = allCells.indexOf(currentCell);
+  /**
+   * Moves focus to earlier or later cells (in dom order) by offset cells relative to
+   * currentCell.
+   */
+  moveFocusHorizontally(currentCell: HTMLElement, offset: number): void {
+    const cells =
+        Array.from(closest(currentCell, TABLE_SELECTOR)!.querySelectorAll(CELL_SELECTOR)) as
+        HTMLElement[];
+    const currentIndex = cells.indexOf(currentCell);
     const newIndex = currentIndex + offset;
 
     if (cells[newIndex]) {
       cells[newIndex].focus();
     }
   }
 
-  moveFocusVertically(currentCell: HTMLElement, offset: number) {
-    const currentRow = closest(currentCell, ROW_SELECTOR);
-    const rows = Array.from(closest(currentRow, TABLE_SELECTOR).querySelectorAll(ROW_SELECTOR));
-    const currentRowIndex = rows.indexOf(currentRowIndex);
-    const currentIndexWithinRow = Array.from(currentRow.querySelectorAll(CELL_SELECTOR));
+  /** Moves focus to up or down by row by offset cells relative to currentCell. */
+  moveFocusVertically(currentCell: HTMLElement, offset: number): void {
+    const currentRow = closest(currentCell, ROW_SELECTOR)!;
+    const rows = Array.from(closest(currentRow, TABLE_SELECTOR)!.querySelectorAll(ROW_SELECTOR));
+    const currentRowIndex = rows.indexOf(currentRow);
+    const currentIndexWithinRow =
+        Array.from(currentRow.querySelectorAll(CELL_SELECTOR)).indexOf(currentCell);
     const newRowIndex = currentRowIndex + offset;
 
-    if (rows[newRowIndex] && rows[newRowIndex][currentIndexWithinRow]) {
-      rows[newRowIndex][currentIndexWithinRow].focus();
+    if (rows[newRowIndex]) {
+      const rowToFocus =
+          Array.from(rows[newRowIndex].querySelectorAll(CELL_SELECTOR)) as HTMLElement[];
+
+      if (rowToFocus[currentIndexWithinRow]) {
+        rowToFocus[currentIndexWithinRow].focus();
+      }
     }
   }
 
-  protected handleKey(key: string, cell: HTMLElement) {
-    switch (key) {
+  /** Translates arrow keydown events into focus move operations. */
+  protected handleKeyboardEvent(evt: KeyboardEvent): void {
+    const cell = closest(evt.target, CELL_SELECTOR) as HTMLElement | null;
+
+    if (!cell) {
+      return;
+    }
+
+    switch (evt.key) {
       case 'ArrowUp':
         this.moveFocusVertically(cell, -1);
         break;
@@ -59,7 +82,10 @@ export class FocusDispatcher {
       case 'ArrowRight':
         this.moveFocusHorizontally(cell, this.directionality.value === 'ltr' ? 1 : -1);
         break;
-        defualt: break;
+      default:
+        return;
     }
+
+    evt.preventDefault();
   }
 }

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

@@ -24,6 +24,7 @@ import {debounceTime, filter, map, mapTo, takeUntil} from 'rxjs/operators';
 
 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 {closest} from './polyfill';
 import {PopoverEditPositionStrategyFactory} from './popover-edit-position-strategy-factory';
 
@@ -48,7 +49,7 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
   constructor(
       protected readonly elementRef: ElementRef,
       protected readonly editEventDispatcher: EditEventDispatcher,
-      protected readonly ngZone: NgZone) {}
+      protected readonly focusDispatcher: FocusDispatcher, protected readonly ngZone: NgZone) {}
 
   ngAfterViewInit(): void {
     this._listenForTableEvents();
@@ -85,6 +86,10 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
           filter(event => event.key === 'Enter'),
           toClosest(CELL_SELECTOR),
           ).subscribe(this.editEventDispatcher.editing);
+
+      fromEvent<KeyboardEvent>(element, 'keydown')
+          .pipe(takeUntil(this.destroyed))
+          .subscribe(this.focusDispatcher.keyObserver);
     });
   }
 }