From b0e51d3eb229b05074ceebda417e543e3fc45dd3 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Fri, 20 Sep 2024 16:50:08 -0700 Subject: [PATCH] debugging re-init table on sort --- .../src/components/hds/table/index.hbs | 20 +++---- .../src/components/hds/table/index.ts | 57 +++++++++++++------ 2 files changed, 50 insertions(+), 27 deletions(-) diff --git a/packages/components/src/components/hds/table/index.hbs b/packages/components/src/components/hds/table/index.hbs index 0126c9f2d8..d9a6eccb58 100644 --- 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 }} - +
{{#if @columns}} {{else if @caption}} @@ -31,7 +37,6 @@ @width={{column.width}} @tooltip={{column.tooltip}} @isGrid={{@isGrid}} - @onKeyboardPress={{if @isGrid (fn this.handleArrowKeyPress)}} > {{column.label}} @@ -42,7 +47,6 @@ @tooltip={{column.tooltip}} @isVisuallyHidden={{column.isVisuallyHidden}} @isGrid={{@isGrid}} - @onKeyboardPress={{if @isGrid (fn this.handleArrowKeyPress)}} >{{column.label}} {{/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 index f391f634b9..d1d32cb526 100644 --- 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 { undefined; selectableRows: HdsTableSelectableRow[] = []; @tracked isSelectAllCheckboxSelected?: boolean = undefined; + table: HTMLTableElement | undefined; @tracked allGridCells: HTMLElement[][] = []; @@ -194,10 +195,10 @@ export default class HdsTable extends Component { 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 { 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 { } } + @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 { 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,14 +291,17 @@ export default class HdsTable extends Component { 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]; @@ -280,6 +309,7 @@ export default class HdsTable extends Component { break; case 'ArrowDown': + event.preventDefault(); newCellRow = this.allGridCells[currentCellCoordinates.rowIndex + 1]; if (newCellRow) { newCell = newCellRow[currentCellCoordinates.columnIndex]; @@ -287,13 +317,12 @@ export default class HdsTable extends Component { 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 { ); } } - - @action handleArrowKeyPress(event: KeyboardEvent): void { - const { key } = event; - - console.log(key); - } }
{{@caption}} {{this.sortedMessageText}}