From fdac6428b419b3d49a0157ecb6b46e7da4a8e9d5 Mon Sep 17 00:00:00 2001
From: Vicky Bansal <67091118+vicky-primathon@users.noreply.github.com>
Date: Fri, 8 Oct 2021 18:00:12 +0530
Subject: [PATCH] fix: Icon button click should not de-select row in table
 widget (#8197)

---
 .../Table_Widget_Add_button_spec.js           | 11 +++++++++++
 app/client/cypress/locators/Widgets.json      |  1 +
 .../src/widgets/TableWidget/widget/index.tsx  | 19 +++++++++----------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js
index 90d02b3975..b2ae72f35c 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js
@@ -155,4 +155,15 @@ describe("Table Widget property pane feature validation", function() {
         expect(someText).to.equal("Successful tobias.funke@reqres.in");
       });
   });
+  it("Table widget test on button icon click, row should not get deselected", () => {
+    cy.get(widgetsPage.tableIconBtn)
+      .last()
+      .click({ force: true });
+    cy.get(commonlocators.TextInside).should("have.text", "Tobias Funke");
+    //click icon button again
+    cy.get(widgetsPage.tableIconBtn)
+      .last()
+      .click({ force: true });
+    cy.get(commonlocators.TextInside).should("have.text", "Tobias Funke");
+  });
 });
diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json
index 0fb916e6e6..2da403d8e4 100644
--- a/app/client/cypress/locators/Widgets.json
+++ b/app/client/cypress/locators/Widgets.json
@@ -112,6 +112,7 @@
     "toggleChartType": ".t--property-control-charttype .t--js-toggle",
     "inputToggleOnClick": ".t--property-control-onclick div.CodeMirror-lines",
     "tableBtn": ".t--draggable-tablewidget .bp3-button",
+    "tableIconBtn": ".t--draggable-tablewidget .bp3-icon",
     "toastAction": ".Toastify__toast-container--top-right .t--toast-action",
     "toastActionText": ".Toastify__toast-container--top-right .t--toast-action span",
     "defaultColName": "[data-rbd-draggable-id='customColumn1'] input",
diff --git a/app/client/src/widgets/TableWidget/widget/index.tsx b/app/client/src/widgets/TableWidget/widget/index.tsx
index 78ca2098f0..a878415357 100644
--- a/app/client/src/widgets/TableWidget/widget/index.tsx
+++ b/app/client/src/widgets/TableWidget/widget/index.tsx
@@ -142,15 +142,15 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
             columnProperties,
             originalIndex,
           );
+          let isSelected = false;
+          if (this.props.multiRowSelection) {
+            isSelected =
+              Array.isArray(this.props.selectedRowIndices) &&
+              this.props.selectedRowIndices.includes(rowIndex);
+          } else {
+            isSelected = this.props.selectedRowIndex === rowIndex;
+          }
           if (columnProperties.columnType === "button") {
-            let isSelected = false;
-            if (this.props.multiRowSelection) {
-              isSelected =
-                Array.isArray(this.props.selectedRowIndices) &&
-                this.props.selectedRowIndices.includes(rowIndex);
-            } else {
-              isSelected = this.props.selectedRowIndex === rowIndex;
-            }
             const buttonProps = {
               isSelected: isSelected,
               onCommandClick: (action: string, onComplete: () => void) =>
@@ -183,7 +183,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
                 : undefined,
             });
           } else if (columnProperties.columnType === "image") {
-            const isSelected = !!props.row.isSelected;
             const isCellVisible = cellProperties.isCellVisible ?? true;
             const onClick = columnProperties.onClick
               ? () =>
@@ -220,7 +219,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
             return renderMenuButton(menuButtonProps, isHidden, cellProperties);
           } else if (columnProperties.columnType === "iconButton") {
             const iconButtonProps = {
-              isSelected: !!props.row.isSelected,
+              isSelected: isSelected,
               onCommandClick: (action: string, onComplete: () => void) =>
                 this.onCommandClick(rowIndex, action, onComplete),
               columnActions: [