fix: Multiselect widget selected values inside list widget

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

@@ -0,0 +1,28 @@
+import { locators } from "../../../../support/Objects/ObjectsCore";
+import * as _ from "../../../../support/Objects/ObjectsCore";
+
+const widgetSelector = (name: string) => `[data-widgetname-cy="${name}"]`;
+
+describe("Bug 41210: MultiSelectWidgetV2 inside ListWidget - selected values and labels persist per item", function () {
+  before(() => {
+    _.agHelper.AddDsl("Listv2/emptyList");
+  });
+
+  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"]');
+    _.agHelper.GetNClick(locators._enterPreviewMode);
+    _.agHelper.SelectFromMultiSelect(["Red"]);
+
+    const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`;
+
+    cy.get(listContainer).eq(1).click();
+    cy.get(listContainer).eq(0).click();
+    cy.get(
+      `${widgetSelector("MultiSelect1")} .rc-select-selection-item`,
+    ).should("contain.text", "Red");
+  });
+});

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

@@ -809,6 +809,19 @@ class MultiSelectWidget extends BaseWidget<
     if (hasChanges && this.props.isDirty) {
       this.props.updateWidgetMetaProperty("isDirty", false);
     }
+
+    if (hasChanges) {
+      const itemId = String(this.props.currentIndex);
+      const updatedSelectedValuesByItem = {
+        ...(this.props.selectedValuesByItem || {}),
+        [itemId]: this.props.defaultOptionValue,
+      };
+
+      this.props.updateWidgetMetaProperty(
+        "selectedValuesByItem",
+        updatedSelectedValuesByItem,
+      );
+    }
   }
 
   static getSetterConfig(): SetterConfig {
@@ -887,7 +900,13 @@ class MultiSelectWidget extends BaseWidget<
   }
 
   onOptionChange = (value: DraftValueType) => {
-    this.props.updateWidgetMetaProperty("selectedOptions", value, {
+    const itemId = this.props.currentIndex;
+    const updatedValue = {
+      ...(this.props.selectedValuesByItem || {}),
+      [itemId]: value,
+    };
+
+    this.props.updateWidgetMetaProperty("selectedValuesByItem", updatedValue, {
       triggerPropertyName: "onOptionChange",
       dynamicString: this.props.onOptionChange,
       event: {
@@ -902,17 +921,23 @@ class MultiSelectWidget extends BaseWidget<
 
   // { label , value } is needed in the widget
   mergeLabelAndValue = (): LabelInValueType[] => {
-    if (!this.props.selectedOptionLabels || !this.props.selectedOptionValues) {
-      return [];
+    const {
+      currentIndex,
+      defaultOptionValue = [],
+      selectedValuesByItem = {},
+      updateWidgetMetaProperty,
+    } = this.props;
+    const itemId = String(currentIndex);
+    const values = selectedValuesByItem[itemId] || defaultOptionValue;
+
+    if (!selectedValuesByItem[itemId] && defaultOptionValue) {
+      updateWidgetMetaProperty("selectedValuesByItem", {
+        ...selectedValuesByItem,
+        [itemId]: defaultOptionValue,
+      });
     }
 
-    const labels = [...this.props.selectedOptionLabels];
-    const values = [...this.props.selectedOptionValues];
-
-    return values.map((value, index) => ({
-      value,
-      label: labels[index],
-    }));
+    return values;
   };
 
   onFilterChange = (value: string) => {