debugging re-init table on sort

hashicorp · Sep 24, 2024 · b0e51d3 · b0e51d3
1 parent 1404a43
commit b0e51d3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 27 deletions.
diff --git a/packages/components/src/components/hds/table/index.hbs b/packages/components/src/components/hds/table/index.hbs
@@ -3,7 +3,13 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<table class={{this.classNames}} ...attributes role={{if @isGrid "grid"}} {{did-insert this.didInsert}}>
+<table
+  class={{this.classNames}}
+  ...attributes
+  role={{if @isGrid "grid"}}
+  {{did-insert this.didInsert}}
+  {{did-update this.initializeGridCells this.sortBy}}
+>
   {{#if @columns}}
     <caption class="sr-only" aria-live="polite">{{@caption}} {{this.sortedMessageText}}</caption>
   {{else if @caption}}
@@ -31,7 +37,6 @@
               @width={{column.width}}
               @tooltip={{column.tooltip}}
               @isGrid={{@isGrid}}
-              @onKeyboardPress={{if @isGrid (fn this.handleArrowKeyPress)}}
             >
               {{column.label}}
             </Hds::Table::ThSort>
@@ -42,7 +47,6 @@
               @tooltip={{column.tooltip}}
               @isVisuallyHidden={{column.isVisuallyHidden}}
               @isGrid={{@isGrid}}
-              @onKeyboardPress={{if @isGrid (fn this.handleArrowKeyPress)}}
             >{{column.label}}</Hds::Table::Th>
           {{/if}}
         {{/each}}
@@ -61,7 +65,7 @@
             onClickSortBySelected=(if @selectableColumnKey (fn this.setSortBy @selectableColumnKey))
             sortBySelectedOrder=(if (eq this.sortBy @selectableColumnKey) this.sortOrder)
           )
-          Th=(component "hds/table/th" isGrid=@isGrid onKeyboardPress=(if @isGrid (fn this.handleArrowKeyPress)))
+          Th=(component "hds/table/th" isGrid=@isGrid)
           ThSort=(component "hds/table/th-sort")
           sortBy=this.sortBy
           sortOrder=this.sortOrder
@@ -92,9 +96,7 @@
               selectionAriaLabelSuffix=@selectionAriaLabelSuffix
             )
             Th=(component "hds/table/th" scope="row")
-            Td=(component
-              "hds/table/td" align=@align isGrid=@isGrid onKeyboardPress=(if @isGrid (fn this.handleArrowKeyPress))
-            )
+            Td=(component "hds/table/td" align=@align isGrid=@isGrid)
             data=record
           )
           to="body"
@@ -113,9 +115,7 @@
             selectionAriaLabelSuffix=@selectionAriaLabelSuffix
           )
           Th=(component "hds/table/th" scope="row")
-          Td=(component
-            "hds/table/td" align=@align isGrid=@isGrid onKeyboardPress=(if @isGrid (fn this.handleArrowKeyPress))
-          )
+          Td=(component "hds/table/td" align=@align isGrid=@isGrid)
           sortBy=this.sortBy
           sortOrder=this.sortOrder
         )

diff --git a/packages/components/src/components/hds/table/index.ts b/packages/components/src/components/hds/table/index.ts
@@ -94,6 +94,7 @@ export default class HdsTable extends Component<HdsTableSignature> {
     undefined;
   selectableRows: HdsTableSelectableRow[] = [];
   @tracked isSelectAllCheckboxSelected?: boolean = undefined;
+  table: HTMLTableElement | undefined;
 
   @tracked allGridCells: HTMLElement[][] = [];
 
@@ -194,10 +195,10 @@ export default class HdsTable extends Component<HdsTableSignature> {
     return classes.join(' ');
   }
 
-  @action
-  didInsert(table: HTMLTableElement): void {
-    if (this.args.isGrid) {
-      const rows = table.querySelectorAll('tr');
+  initializeGridCells(): void {
+    console.log('hello', this.table);
+    if (this.table) {
+      const rows = this.table.querySelectorAll('tr');
 
       const initializedCells = Array(rows.length).fill([]);
 
@@ -214,8 +215,7 @@ export default class HdsTable extends Component<HdsTableSignature> {
               if (i === 0 && j === 0) {
                 cell.setAttribute('tabindex', '0');
               }
-              // cell.setAttribute('role', 'gridcell');
-              // cell.setAttribute('tabindex', '0');
+
               cell.addEventListener('keydown', this.onKeyDown);
             }
           }
@@ -226,6 +226,14 @@ export default class HdsTable extends Component<HdsTableSignature> {
     }
   }
 
+  @action
+  didInsert(table: HTMLTableElement): void {
+    if (this.args.isGrid) {
+      this.table = table;
+      this.initializeGridCells();
+    }
+  }
+
   changeActiveCell(oldCell: HTMLElement, newCell: HTMLElement) {
     newCell.setAttribute('tabindex', '0');
     newCell.classList.add('hds-table__td--gridcell-active');
@@ -251,10 +259,28 @@ export default class HdsTable extends Component<HdsTableSignature> {
     return { rowIndex, columnIndex };
   }
 
+  performCellAction(cell: HTMLElement) {
+    // get focusable elements within cell
+    // if only 1, perform click action on it
+    // if multiple, focus the first one
+
+    const focusableElements = cell.querySelectorAll(
+      'button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    console.log(focusableElements);
+
+    if (focusableElements.length === 1) {
+      const element = focusableElements[0] as HTMLElement;
+      element.click();
+    } else if (focusableElements.length > 1) {
+      const element = focusableElements[0] as HTMLElement;
+      element.focus();
+    }
+  }
+
   @action
   onKeyDown(event: KeyboardEvent): void {
-    event.preventDefault();
-
     const currentCellCoordinates = this.getCurrentCellCoordinates(
       event.target as HTMLElement
     );
@@ -265,35 +291,38 @@ export default class HdsTable extends Component<HdsTableSignature> {
     if (currentCellRow) {
       switch (event.key) {
         case 'ArrowRight':
+          event.preventDefault();
           newCell = currentCellRow[currentCellCoordinates.columnIndex + 1];
           break;
 
         case 'ArrowLeft':
+          event.preventDefault();
           newCell = currentCellRow[currentCellCoordinates.columnIndex - 1];
           break;
 
         case 'ArrowUp':
+          event.preventDefault();
           newCellRow = this.allGridCells[currentCellCoordinates.rowIndex - 1];
           if (newCellRow) {
             newCell = newCellRow[currentCellCoordinates.columnIndex];
           }
           break;
 
         case 'ArrowDown':
+          event.preventDefault();
           newCellRow = this.allGridCells[currentCellCoordinates.rowIndex + 1];
           if (newCellRow) {
             newCell = newCellRow[currentCellCoordinates.columnIndex];
           }
           break;
 
         case 'Enter':
+          event.preventDefault();
+          this.performCellAction(event.target as HTMLElement);
           break;
         case 'Space':
           break;
 
-        case 'Escape':
-          break;
-
         default:
           break;
       }
@@ -425,10 +454,4 @@ export default class HdsTable extends Component<HdsTableSignature> {
       );
     }
   }
-
-  @action handleArrowKeyPress(event: KeyboardEvent): void {
-    const { key } = event;
-
-    console.log(key);
-  }
 }