feat: change value to label in onItemSelect inside SelectCell of table widget (#34743)
## Description **Issue** In the table widget, the select column currently displays the value from the dropdown when a user makes a selection, rather than the label. This behaviour is inconsistent with the standalone select widget, which correctly renders the label upon selection. **Fix** This PR addresses the inconsistency by modifying the table widget's select column to display the label of the selected item, ensuring alignment with the behaviour of the standalone select widget. Fixes #26188 ## Automation /ok-to-test tags="@tag.Table, @tag.Binding, @tag.Widget, @tag.Sanity" ### 🔍 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/9843945454> > Commit: 330d0d3f82ea7a8769c350f7caa0714959838f12 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9843945454&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Table, @tag.Binding, @tag.Widget, @tag.Sanity` > Spec: > <hr>Mon, 08 Jul 2024 18:21:02 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Updated the `SelectCell` component to use the `option.label` instead of `option.value` for item selection. - **Tests** - Revised test descriptions and assertions for select options in Table Widget to reflect the new functionality of using labels as values in select cells. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
ed42302323
commit
b7853a99b2
|
|
@ -174,7 +174,39 @@ describe(
|
|||
cy.discardTableRow(4, 0);
|
||||
});
|
||||
|
||||
it("6. should check that currentRow is accessible in the select options", () => {
|
||||
it("6. should check that on option select uses label as value in select cell (#34743)", () => {
|
||||
cy.updateCodeInput(
|
||||
".t--property-control-options",
|
||||
`
|
||||
[
|
||||
{
|
||||
"label": "#1label",
|
||||
"value": "#1value"
|
||||
},
|
||||
{
|
||||
"label": "#2label",
|
||||
"value": "#2value"
|
||||
},
|
||||
{
|
||||
"label": "#3label",
|
||||
"value": "#3value"
|
||||
}
|
||||
]
|
||||
`,
|
||||
);
|
||||
cy.editTableSelectCell(0, 0);
|
||||
cy.get(".menu-item-link").contains("#3label").click();
|
||||
|
||||
_.agHelper.ValidateToastMessage("#3label");
|
||||
|
||||
cy.get(".menu-virtual-list").should("not.exist");
|
||||
cy.readTableV2data(0, 0).then((val) => {
|
||||
expect(val).to.equal("#3label");
|
||||
});
|
||||
cy.discardTableRow(4, 0);
|
||||
});
|
||||
|
||||
it("7. should check that currentRow is accessible in the select options", () => {
|
||||
cy.updateCodeInput(
|
||||
".t--property-control-options",
|
||||
`
|
||||
|
|
@ -199,7 +231,7 @@ describe(
|
|||
cy.get(".menu-item-text").contains("#1").should("not.exist");
|
||||
});
|
||||
|
||||
it("7. should check that 'same select option in new row' property is working", () => {
|
||||
it("8. should check that 'same select option in new row' property is working", () => {
|
||||
_.propPane.NavigateBackToPropertyPane();
|
||||
|
||||
const checkSameOptionsInNewRowWhileEditing = () => {
|
||||
|
|
@ -265,7 +297,7 @@ describe(
|
|||
checkSameOptionsWhileAddingNewRow();
|
||||
});
|
||||
|
||||
it("8. should check that 'new row select options' is working", () => {
|
||||
it("9. 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");
|
||||
|
|
@ -330,7 +362,7 @@ describe(
|
|||
checkNoOptionState();
|
||||
});
|
||||
|
||||
it("9. should check that server side filering is working", () => {
|
||||
it("10. 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;",
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ export const SelectCell = (props: SelectProps) => {
|
|||
const onSelect = useCallback(
|
||||
(option: DropdownOption) => {
|
||||
onItemSelect(
|
||||
option.value || "",
|
||||
option.label || "",
|
||||
rowIndex,
|
||||
alias,
|
||||
onOptionSelectActionString,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user