From 13d316db55b643f9c48ae8cbf3e57fbe4ea02fe3 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Mon, 13 Jan 2025 07:40:33 +0100
Subject: [PATCH] fix: select column to display cell value when options are
 mismatched (#38387)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
**Problem**
When a table cell is configured with the Select column type, the cell
value is not displayed if it does not match any of the label-value pairs
in the select options. This results in a broken user experience where it
appears as if the cell has no value.

**Expected Behaviour**
The table cell should always display its value if it exists, regardless
of whether it matches the provided select options.

**Solution**
To address this issue, the default behaviour for the select options has
been updated to prioritise the cell's value instead of falling back to
an empty string. This ensures that cell values are always visible to the
user, even if they are not part of the predefined select options.


Fixes #35807

## Automation

/ok-to-test tags="@tag.Widget, @tag.Select, @tag.Binding, @tag.Table,
@tag.Sanity"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12544985047>
> Commit: d39d7f30bb9ae713a4d7c2038fbef89b6e8acadf
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12544985047&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget, @tag.Select, @tag.Binding, @tag.Table,
@tag.Sanity`
> Spec:
> <hr>Mon, 30 Dec 2024 11:52:44 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Improved display logic in the SelectCell component to show the value
when no matching option is found.
- Updated test cases for the Select column type functionality to ensure
accurate verification of select options and display behavior when
options are not provided.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Widgets/TableV2/columnTypes/Select1_spec.ts        | 10 ++++++++--
 .../component/cellComponents/SelectCell.tsx            |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts
index dcbe68ccd274..5d84a004c015 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts
@@ -336,7 +336,13 @@ describe(
       checkSameOptionsWhileAddingNewRow();
     });
 
-    it("10. should check that 'new row select options' is working", () => {
+    it("10. check that table shows with select options mismatch", () => {
+      cy.readTableV2data(0, 0).then((val) => {
+        expect(val).to.equal("#1");
+      });
+    });
+
+    it("11. should check that 'new row select options' is working", () => {
       const checkNewRowOptions = () => {
         // New row select options should be visible when "Same options in new row" is turned off
         _.propPane.TogglePropertyState("Same options in new row", "Off");
@@ -401,7 +407,7 @@ describe(
       checkNoOptionState();
     });
 
-    it("11. should check that server side filering is working", () => {
+    it("12. should check that server side filering is working", () => {
       _.dataSources.CreateDataSource("Postgres");
       _.dataSources.CreateQueryAfterDSSaved(
         "SELECT * FROM public.astronauts {{this.params.filterText ? `WHERE name LIKE '%${this.params.filterText}%'` : ''}} LIMIT 10;",
diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx
index 1eff4dfb08b7..078f968f8b8d 100644
--- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx
+++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx
@@ -204,7 +204,7 @@ export const SelectCell = (props: SelectProps) => {
 
     return selectedOption
       ? selectedOption[TableSelectColumnOptionKeys.LABEL]
-      : "";
+      : value;
   }, [value, options]);
 
   if (isEditable && isCellEditable && isCellEditMode) {