fix: multiselect widget selected values inside list widget

app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts

@@ -0,0 +1,84 @@
+import { locators } from "../../../../support/Objects/ObjectsCore";
+import * as _ from "../../../../support/Objects/ObjectsCore";
+import EditorNavigation, {
+  EntityType,
+} from "../../../../support/Pages/EditorNavigation";
+
+describe("Bug 41210: MultiSelectWidgetV2 inside ListWidget - selected values and labels persist per item", function () {
+  const widgetSelector = (name: string) => `[data-widgetname-cy="${name}"]`;
+  const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`;
+
+  before(() => {
+    _.agHelper.AddDsl("Listv2/emptyList");
+    _.jsEditor.CreateJSObject(
+      `export default {
+  listItems: [
+    { id: 1, name: "Row 1" },
+    { id: 2, name: "Row 2" },
+    { id: 3, name: "Row 3" }
+  ],
+
+  getItems() {
+    return this.listItems;
+  },
+
+  deleteItemAtIndex(index) {
+    this.listItems = this.listItems.filter((_, i) => i !== index);
+    return this.listItems;
+  }
+}`,
+      {
+        paste: true,
+        completeReplace: true,
+        toRun: false,
+        shouldCreateNewJSObj: true,
+        prettify: false,
+      },
+    );
+  });
+
+  it("should persist selected values for each list item and initialize with default values on first render", function () {
+    cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", {
+      x: 250,
+      y: 50,
+    });
+    _.propPane.UpdatePropertyFieldValue("Default selected values", '["GREEN"]');
+    EditorNavigation.SelectEntityByName("List1", EntityType.Widget);
+    _.propPane.UpdatePropertyFieldValue("Items", `{{JSObject1.getItems()}}`);
+    _.agHelper.GetNClick(locators._enterPreviewMode);
+    _.agHelper.SelectFromMultiSelect(["Red"]);
+
+    cy.get(listContainer).eq(1).click();
+    cy.get(listContainer).eq(0).click();
+    cy.get(
+      `${locators._widgetByName("MultiSelect1")} .rc-select-selection-item`,
+    ).should("contain.text", "Red");
+  });
+
+  it("should delete first list item and keep selections mapped correctly", function () {
+    _.agHelper.GetNClick(locators._exitPreviewMode);
+    cy.dragAndDropToWidget("iconbuttonwidget", "containerwidget", {
+      x: 350,
+      y: 50,
+    });
+
+    _.propPane.EnterJSContext("Icon", "trash");
+    _.propPane.EnterJSContext(
+      "onClick",
+      `{{JSObject1.deleteItemAtIndex(currentIndex)}}`,
+      true,
+      false,
+    );
+
+    _.agHelper.GetNClick(locators._enterPreviewMode);
+    _.agHelper.SelectFromMultiSelect(["Red"], 1);
+    _.agHelper.GetNClick(locators._widgetByName("IconButton1"));
+
+    cy.get(listContainer).should("have.length", 2);
+
+    cy.get(locators._widgetByName("MultiSelect1"))
+      .eq(0)
+      .find(".rc-select-selection-item")
+      .should("contain.text", "Red");
+  });
+});

app/client/src/widgets/ListWidgetV2/widget/index.tsx

@@ -81,6 +81,7 @@ type BaseMetaWidget = FlattenedWidgetProps & {
   currentIndex: number;
   currentView: string;
   currentItem: Record<string, unknown> | string;
+  listItemId?: string;
 };
 
 export type MetaWidget<TProps = void> = TProps extends void
@@ -724,6 +725,14 @@ class ListWidget extends BaseWidget<
     if (metaWidget.dynamicHeight === "AUTO_HEIGHT") {
       metaWidget.dynamicHeight = "FIXED";
     }
+
+    if (metaWidget.currentIndex >= 0) {
+      const key = this.metaWidgetGenerator.getPrimaryKey(
+        metaWidget.currentIndex,
+      );
+
+      metaWidget.listItemId = key;
+    }
   };
 
   updateCurrentItemsViewBinding = () => {

app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx

@@ -776,9 +776,20 @@ class MultiSelectWidget extends BaseWidget<
       selectedOptions: undefined,
       filterText: "",
       isDirty: false,
+      selectedValuesByItem: {},
     };
   }
 
+  private getListItemId(index: number | undefined = this.props.currentIndex) {
+    const { listItemId } = this.props;
+
+    if (listItemId !== undefined && listItemId !== null) {
+      return String(listItemId);
+    }
+
+    return String(index ?? 0);
+  }
+
   componentDidUpdate(prevProps: MultiSelectWidgetProps): void {
     // Check if defaultOptionValue is string
     let isStringArray = false;
@@ -809,6 +820,54 @@ class MultiSelectWidget extends BaseWidget<
     if (hasChanges && this.props.isDirty) {
       this.props.updateWidgetMetaProperty("isDirty", false);
     }
+
+    if (hasChanges) {
+      const listItemId = this.getListItemId(this.props.currentIndex);
+      const updatedSelectedValuesByItem = {
+        ...(this.props.selectedValuesByItem || {}),
+        [listItemId]: this.props.defaultOptionValue,
+      };
+
+      this.props.updateWidgetMetaProperty(
+        "selectedValuesByItem",
+        updatedSelectedValuesByItem,
+      );
+    }
+
+    this.syncSelectionMapOnIndexChange(
+      prevProps.currentIndex,
+      this.props.currentIndex,
+    );
+  }
+
+  private syncSelectionMapOnIndexChange(
+    previousRowIndex?: number,
+    currentRowIndex?: number,
+  ) {
+    const {
+      defaultOptionValue = [],
+      selectedValuesByItem = {},
+      updateWidgetMetaProperty,
+    } = this.props;
+
+    if (currentRowIndex === undefined) return;
+
+    const currentKey = this.getListItemId(currentRowIndex);
+    let nextState = selectedValuesByItem;
+
+    if (!(currentKey in nextState)) {
+      nextState = {
+        ...nextState,
+        [currentKey]:
+          defaultOptionValue.length > 0
+            ? (defaultOptionValue as LabelInValueType[])
+            : [],
+      };
+    }
+
+    if (nextState !== selectedValuesByItem) {
+      updateWidgetMetaProperty("selectedValuesByItem", nextState);
+    }
   }
 
   static getSetterConfig(): SetterConfig {
@@ -887,7 +946,13 @@ class MultiSelectWidget extends BaseWidget<
   }
 
   onOptionChange = (value: DraftValueType) => {
-    this.props.updateWidgetMetaProperty("selectedOptions", value, {
+    const listItemId = this.getListItemId(this.props.currentIndex);
+    const updatedValue = {
+      ...(this.props.selectedValuesByItem || {}),
+      [listItemId]: value,
+    };
+
+    this.props.updateWidgetMetaProperty("selectedValuesByItem", updatedValue, {
       triggerPropertyName: "onOptionChange",
       dynamicString: this.props.onOptionChange,
       event: {
@@ -902,17 +967,16 @@ class MultiSelectWidget extends BaseWidget<
 
   // { label , value } is needed in the widget
   mergeLabelAndValue = (): LabelInValueType[] => {
-    if (!this.props.selectedOptionLabels || !this.props.selectedOptionValues) {
-      return [];
-    }
+    const {
+      currentIndex = 0,
+      defaultOptionValue = [],
+      selectedValuesByItem = {},
+    } = this.props;
 
-    const labels = [...this.props.selectedOptionLabels];
-    const values = [...this.props.selectedOptionValues];
+    const itemId = this.getListItemId(currentIndex);
+    const values = selectedValuesByItem[itemId] ?? defaultOptionValue;
 
-    return values.map((value, index) => ({
-      value,
-      label: labels[index],
-    }));
+    return values;
   };
 
   onFilterChange = (value: string) => {
@@ -991,6 +1055,9 @@ export interface MultiSelectWidgetProps extends WidgetProps {
   isDirty?: boolean;
   labelComponentWidth?: number;
   rtl?: boolean;
+  currentIndex?: number;
+  selectedValuesByItem?: Record<string, LabelInValueType[]>;
+  listItemId?: string;
 }
 
 export default MultiSelectWidget;