fix: multiselect widget selected values inside list widget

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

@@ -0,0 +1,83 @@
+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(
+      "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/MultiSelectWidgetV2/widget/index.tsx

@@ -776,6 +776,7 @@ class MultiSelectWidget extends BaseWidget<
       selectedOptions: undefined,
       filterText: "",
       isDirty: false,
+      selectedValuesByItem: {},
     };
   }
 
@@ -809,6 +810,77 @@ class MultiSelectWidget extends BaseWidget<
     if (hasChanges && this.props.isDirty) {
       this.props.updateWidgetMetaProperty("isDirty", false);
     }
+
+    if (hasChanges) {
+      const itemId = String(this.props.currentIndex ?? 0);
+      const updatedSelectedValuesByItem = {
+        ...(this.props.selectedValuesByItem || {}),
+        [itemId]: this.props.defaultOptionValue,
+      };
+
+      this.props.updateWidgetMetaProperty(
+        "selectedValuesByItem",
+        updatedSelectedValuesByItem,
+      );
+    }
+
+    this.syncSelectionMapOnIndexChange(
+      prevProps.currentIndex,
+      this.props.currentIndex,
+    );
+  }
+
+  private syncSelectionMapOnIndexChange(
+    previousRowIndex?: number,
+    currentRowIndex?: number,
+  ) {
+    const { selectedValuesByItem, updateWidgetMetaProperty } = this.props;
+
+    if (currentRowIndex === undefined || !selectedValuesByItem) return;
+
+    const currentKey = String(currentRowIndex);
+    let nextState = selectedValuesByItem;
+
+    if (
+      previousRowIndex !== undefined &&
+      previousRowIndex > currentRowIndex &&
+      previousRowIndex in nextState &&
+      !(currentKey in nextState)
+    ) {
+      const previousKey = String(previousRowIndex);
+
+      nextState = {
+        ...nextState,
+        [currentKey]: nextState[previousKey],
+      };
+    }
+
+    if (!(currentKey in nextState)) {
+      const sortedItemKeys = Object.keys(nextState)
+        .map(Number)
+        .sort((a, b) => a - b);
+
+      const firstStoredKey = sortedItemKeys[0];
+
+      if (firstStoredKey !== undefined && firstStoredKey > currentRowIndex) {
+        const shiftAmount = firstStoredKey - currentRowIndex;
+
+        const updatedSelectionState: Record<string, LabelInValueType[]> = {};
+
+        for (const originalKey of sortedItemKeys) {
+          const newKey = originalKey - shiftAmount;
+
+          updatedSelectionState[String(newKey)] =
+            nextState[String(originalKey)];
+        }
+
+        nextState = updatedSelectionState;
+      }
+    }
+
+    if (nextState !== selectedValuesByItem) {
+      updateWidgetMetaProperty("selectedValuesByItem", nextState);
+    }
   }
 
   static getSetterConfig(): SetterConfig {
@@ -887,7 +959,13 @@ class MultiSelectWidget extends BaseWidget<
   }
 
   onOptionChange = (value: DraftValueType) => {
-    this.props.updateWidgetMetaProperty("selectedOptions", value, {
+    const itemId = String(this.props.currentIndex ?? 0);
+    const updatedValue = {
+      ...(this.props.selectedValuesByItem || {}),
+      [itemId]: value,
+    };
+
+    this.props.updateWidgetMetaProperty("selectedValuesByItem", updatedValue, {
       triggerPropertyName: "onOptionChange",
       dynamicString: this.props.onOptionChange,
       event: {
@@ -902,17 +980,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 = String(currentIndex);
+    const values = selectedValuesByItem[itemId] ?? defaultOptionValue;
 
-    return values.map((value, index) => ({
-      value,
-      label: labels[index],
-    }));
+    return values;
   };
 
   onFilterChange = (value: string) => {
@@ -991,6 +1068,8 @@ export interface MultiSelectWidgetProps extends WidgetProps {
   isDirty?: boolean;
   labelComponentWidth?: number;
   rtl?: boolean;
+  currentIndex?: number;
+  selectedValuesByItem?: Record<string, LabelInValueType[]>;
 }
 
 export default MultiSelectWidget;