From 030211c9da6a9d0ede2dce3c9d41fefa3b0a4c96 Mon Sep 17 00:00:00 2001
From: Giorgi Cheishvili <giorgi.cheishvili@outlook.com>
Date: Mon, 27 Nov 2023 16:41:33 +0400
Subject: [PATCH] fix(platform): fixed table row excessive focus and toggle
 handling with space (#11000)

---
 .../table-row/table-row.component.html        |  2 ++
 .../table-row/table-row.component.ts          | 23 ++++++++-----------
 .../src/lib/table/table.component.html        |  4 ++--
 3 files changed, 13 insertions(+), 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
index 3588fa4b7ca..2a7f18b6013 100644
--- 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
index 70226daff6e..4429b4a8620 100644
--- 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,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -8,7 +8,6 @@ import {
     ElementRef,
     EventEmitter,
     HostBinding,
-    HostListener,
     Input,
     NgZone,
     OnChanges,
@@ -219,18 +218,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.isTreeRow) {
-            const shouldBeOpen = KeyUtil.isKeyCode($event, this._rtl ? LEFT_ARROW : RIGHT_ARROW);
-            if (shouldBeOpen !== this.row.expanded) {
-                this._toggleGroupRow();
-            }
-        }
-    }
-
     /** @hidden */
     ngOnInit(): void {
         super.ngOnInit();
@@ -269,6 +256,14 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
         this._tableRowService.removeEditableCells(this.row);
     }
 
+    /** @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
index 83b0ece0ad7..7975fbb638e 100644
--- a/libs/platform/src/lib/table/table.component.html
+++ b/libs/platform/src/lib/table/table.component.html
@@ -96,8 +96,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"