fix(platform): fixed table row excessive focus and toggle handling wi…

…th space (#11000)
SAP · Nov 27, 2023 · ac758bb · ac758bb
1 parent 5451b0c
commit ac758bb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/libs/platform/src/lib/table/components/table-row/table-row.component.html b/libs/platform/src/lib/table/components/table-row/table-row.component.html
@@ -101,6 +101,7 @@
         last as isLast;
         trackBy: _columnTrackBy
     "
+    #tableCellElement
     [fdpTableCellResizable]="
         colIdx
             | columnResizableSide
@@ -139,6 +140,7 @@
     (keydown.enter)="_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()"
     (keydown.arrowLeft)="_tableRowService.scrollToOverlappedCell()"
     (keydown.arrowRight)="_tableRowService.scrollToOverlappedCell()"
+    (keydown.space)="_handleCellSpaceKey(colIdx, tableCellElement, $event)"
 >
     <div [class.fd-table__text]="column.applyText" [class.fd-table__text--no-wrap]="column.noWrap">
         <span

diff --git a/libs/platform/src/lib/table/components/table-row/table-row.component.ts b/libs/platform/src/lib/table/components/table-row/table-row.component.ts
@@ -1,4 +1,4 @@
-import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import { AsyncPipe, NgClass, NgFor, NgIf, NgStyle, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
 import {
     AfterViewInit,
@@ -8,7 +8,6 @@ import {
     ElementRef,
     EventEmitter,
     HostBinding,
-    HostListener,
     Input,
     NgZone,
     OnChanges,
@@ -256,18 +255,6 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
         });
     }
 
-    /** @hidden */
-    @HostListener('keydown.arrowLeft', ['$event'])
-    @HostListener('keydown.arrowRight', ['$event'])
-    private _onArrowKeydown($event: KeyboardEvent): void {
-        if ($event.target === this._elmRef.nativeElement && this.row.isTree) {
-            const shouldBeOpen = KeyUtil.isKeyCode($event, this._rtl ? LEFT_ARROW : RIGHT_ARROW);
-            if (shouldBeOpen !== this.row.expanded) {
-                this._toggleGroupRow();
-            }
-        }
-    }
-
     /** @hidden */
     ngOnInit(): void {
         super.ngOnInit();
@@ -326,6 +313,14 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
         return column.name;
     }
 
+    /** @hidden */
+    protected _handleCellSpaceKey(colIdx: number, tableCellElement: HTMLTableCellElement, $event: Event): void {
+        if ($event.target === tableCellElement && isTreeRowFirstCell(colIdx, this.row, $event)) {
+            $event.preventDefault();
+            this._toggleGroupRow();
+        }
+    }
+
     /** @hidden */
     private _listenToRowExpansion(): void {
         this._refreshChildRows$.next();

diff --git a/libs/platform/src/lib/table/table.component.html b/libs/platform/src/lib/table/table.component.html
@@ -95,8 +95,8 @@
                             [fdkDndItem]="row"
                             [applyDragItemClass]="isDraggable"
                             [class]="row | rowClasses : rowsClass"
-                            [tabindex]="row.isTree || rowsActivable || !!row.navigatable ? 0 : -1"
-                            [focusable]="row.isTree || rowsActivable || !!row.navigatable"
+                            [tabindex]="rowsActivable || !!row.navigatable ? 0 : -1"
+                            [focusable]="rowsActivable || !!row.navigatable"
                             [hoverable]="rowsActivable || isSelectionColumnShown || !!row.navigatable"
                             [activable]="rowsActivable || !!row.navigatable"
                             [active]="rowIndex === _navigatedRowIndex"