PR(2): Expanded matrix row doesn't support drag and drop (#10665)

* Expanded matrix row doesn't support drag and drop #10597

* Expanded matrix row doesn't support drag and drop #10597

* Expanded matrix row doesn't support drag and drop #10597

* Expanded matrix row doesn't support drag and drop #10597

Author: dmitry-kurmanov

e2e/questions/matrixdynamic.spec.ts

@@ -1,4 +1,4 @@
-import { frameworks, url, initSurvey, getSurveyResult, getVisibleListItemByText, test, expect } from "../helper";
+import { frameworks, url, initSurvey, getSurveyResult, getVisibleListItemByText, test, expect, setData, getData, doDragDrop } from "../helper";
 
 const title = "matrixdynamic";
 
@@ -731,5 +731,90 @@ frameworks.forEach((framework) => {
       const surveyResult = await getSurveyResult(page);
       expect(surveyResult).toEqual({ matrix: [{ col1: "row1" }] });
     });
+
+    test("DnD: Matrixdynamic inside Matrixdynamic", async ({ page }) => {
+      await page.setViewportSize({ width: 1280, height: 1100 });
+      const json = {
+        "elements": [
+          {
+            "type": "matrixdynamic",
+            "name": "parent",
+            "columns": [
+              {
+                "name": "parent-text",
+                "cellType": "text"
+              }
+            ],
+            "detailElements": [
+              {
+                "type": "matrixdynamic",
+                "name": "child",
+                "columns": [
+                  {
+                    "name": "child-text",
+                    "cellType": "text",
+                  }
+                ],
+                "rowCount": 2,
+                "allowRowReorder": true
+              }
+            ],
+            "detailPanelMode": "underRowSingle",
+            "detailPanelShowOnAdding": true,
+            "rowCount": 2,
+            "allowRowReorder": true
+          }
+        ]
+      };
+
+      const data = {
+        "parent": [
+          {
+            "parent-text": "parent text 1",
+            "child": [
+              {
+                "child-text": "child text 1"
+              },
+              {
+                "child-text": "child text 2"
+              }
+            ]
+          },
+          {
+            "parent-text": "parent text 2"
+          }
+        ]
+      };
+
+      await initSurvey(page, framework, json);
+      await setData(page, data);
+
+      await page.getByRole("button", { name: "Show Details" }).first().click();
+      const row1 = page.locator(".sd-matrixdynamic .sd-matrixdynamic tbody tr").nth(0);
+      const row2 = page.locator(".sd-matrixdynamic .sd-matrixdynamic tbody tr").nth(1);
+      const dragIcon = row1.locator(".sd-table__cell--drag .sd-drag-element__svg");
+
+      await row1.hover();
+      await doDragDrop({ page, element: dragIcon, target: row2 });
+
+      expect(await getData(page)).toEqual({
+        "parent": [
+          {
+            "parent-text": "parent text 1",
+            "child": [
+              {
+                "child-text": "child text 2"
+              },
+              {
+                "child-text": "child text 1"
+              },
+            ]
+          },
+          {
+            "parent-text": "parent text 2"
+          }
+        ]
+      });
+    });
   });
 });

packages/survey-angular-ui/src/components/matrix-actions/drag-drop-icon/drag-drop-icon.component.html

@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div>
+  <div (pointerdown)="question.onPointerDown($event, row)">
     <svg *ngIf="question.iconDragElement" [class]="question.cssClasses.dragElementDecorator">
       <use [attr.xlink:href]="question.iconDragElement"></use>
     </svg>

packages/survey-angular-ui/src/components/matrix-actions/drag-drop-icon/drag-drop-icon.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from "@angular/core";
 import { AngularComponentFactory } from "../../../component-factory";
-import { IAction } from "survey-core";
+import { IAction, MatrixDropdownRowModelBase } from "survey-core";
 import { EmbeddedViewContentComponent } from "../../../embedded-view-content.component";
 
 @Component({
@@ -14,6 +14,10 @@ export class MatrixDynamicDragDropIconComponent extends EmbeddedViewContentCompo
   get question() {
     return this.model.data.question;
   }
+
+  get row(): MatrixDropdownRowModelBase {
+    return this.model.data.row;
+  }
 }
 
 AngularComponentFactory.Instance.registerComponent(

packages/survey-angular-ui/src/questions/matrix-row.component.html

@@ -1,5 +1,5 @@
 <ng-template #template>
-  <tr *ngIf="model.visible" [class]="model.className" (pointerdown)="question.onPointerDown($event, row)"
+  <tr *ngIf="model.visible" [class]="model.className"
     [attr.data-sv-drop-target-matrix-row]="model.dropTargetId" #container>
     <sv-ng-matrixdropdown-cell [cell]="cell" [question]="question"
       *ngFor="let cell of model.cells; trackBy: trackCellBy"></sv-ng-matrixdropdown-cell>

packages/survey-react-ui/src/components/matrix-actions/drag-drop-icon/drag-drop-icon.tsx

@@ -1,14 +1,17 @@
 import * as React from "react";
-import { QuestionMatrixDropdownModelBase } from "survey-core";
+import { MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase } from "survey-core";
 import { ReactElementFactory } from "../../../element-factory";
 import { ReactSurveyElement } from "../../../reactquestion_element";
 
 export class SurveyQuestionMatrixDynamicDragDropIcon extends ReactSurveyElement {
   private get question(): QuestionMatrixDropdownModelBase {
     return this.props.item.data.question;
   }
+  private get row(): MatrixDropdownRowModelBase {
+    return this.props.item.data.row;
+  }
   protected renderElement(): React.JSX.Element | null {
-    return <div>{this.renderIcon()}</div>;
+    return <div onPointerDown={(event: any) => { this.question.onPointerDown(event.nativeEvent, this.row); }}>{this.renderIcon()}</div>;
   }
   protected renderIcon(): React.JSX.Element {
     if (this.question.iconDragElement) {

packages/survey-react-ui/src/components/matrix/row.tsx

@@ -59,7 +59,6 @@ export class MatrixRow extends SurveyElementBase<IMatrixRowProps, any> {
         ref={this.root}
         className={model.className}
         data-sv-drop-target-matrix-row={model.dropTargetId}
-        onPointerDown={(event: any) => this.onPointerDownHandler(event)}
       >
         {this.props.children}
       </tr>

packages/survey-vue3-ui/src/MatrixDropdownRow.vue

@@ -1,7 +1,6 @@
 <template>
   <tr
     :data-sv-drop-target-matrix-row="row.dropTargetId"
-    @pointerdown="question.onPointerDown($event, row.row)"
     :class="row.className"
     v-if="row.visible"
     ref="root"

packages/survey-vue3-ui/src/components/matrix-actions/drag-drop-icon/DragDropIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @pointerdown="question.onPointerDown($event, row)">
     <svg
       v-if="question.iconDragElement"
       :class="question.cssClasses.dragElementDecorator"
@@ -14,5 +14,5 @@
 import type { Action } from "survey-core";
 import { useMatrixAction } from "../matrix-action";
 const props = defineProps<{ item: Action }>();
-const { question } = useMatrixAction(props, false);
+const { question, row } = useMatrixAction(props, true);
 </script>

screenshots/matrixdynamic.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { frameworks, url, initSurvey, compareScreenshot, resetFocusToBody } from "../e2e/helper";
+import { frameworks, url, initSurvey, compareScreenshot, resetFocusToBody, doDrag, setData, doDragDrop } from "../e2e/helper";
 
 const title = "Matrixdynamic Screenshot";