From b60da89c79e049f9df22633491e46f1bf4d6fe6f Mon Sep 17 00:00:00 2001
From: Aleksey Novikov <novikov82@gmail.com>
Date: Mon, 14 Aug 2023 16:26:12 +0300
Subject: [PATCH] #6682 Multiple-Choice Matrix Layout is not adjusted on
 smaller screens when it has a colummn with Show in Multiple Columns = true
 Fixes #6682

---
 src/question_matrixdropdownbase.ts            |  5 ++
 src/question_matrixdropdownrendered.ts        | 15 ++--
 tests/markup/etalon_matrixdropdown.ts         | 42 +++++++++-
 ...-show-in-multiple-columns-mobile.snap.html | 83 +++++++++++++++++++
 4 files changed, 138 insertions(+), 7 deletions(-)
 create mode 100644 tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html

diff --git a/src/question_matrixdropdownbase.ts b/src/question_matrixdropdownbase.ts
index 271262d9ea..40abf6013b 100644
--- a/src/question_matrixdropdownbase.ts
+++ b/src/question_matrixdropdownbase.ts
@@ -1408,6 +1408,11 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     newValues["totalRow"] = totalRow;
     return newValues;
   }
+
+  public IsMultiplyColumn(column: MatrixDropdownColumn): boolean {
+    return column.isShowInMultipleColumns && !this.isMobile;
+  }
+
   public locStrsChanged() {
     super.locStrsChanged();
     var columns = this.columns;
diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts
index 8e58d40e62..e0ed1ba2fa 100644
--- a/src/question_matrixdropdownrendered.ts
+++ b/src/question_matrixdropdownrendered.ts
@@ -100,7 +100,7 @@ export class QuestionMatrixDropdownRenderedCell {
       if(!!this.cell.column.cellHint) {
         return this.cell.column.locCellHint.renderedHtml;
       }
-      if(this.cell.column.isShowInMultipleColumns) {
+      if (this.matrix.IsMultiplyColumn(this.cell.column)) {
         if(!!this.item) {
           return this.item.locText.renderedHtml;
         } else {
@@ -404,7 +404,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       for (var i = 0; i < this.matrix.visibleColumns.length; i++) {
         var column = this.matrix.visibleColumns[i];
         if (!column.hasVisibleCell) continue;
-        if (column.isShowInMultipleColumns) {
+        if (this.matrix.IsMultiplyColumn(column)) {
           this.createMutlipleColumnsHeader(column);
         } else {
           this.headerRow.cells.push(this.createHeaderCell(column));
@@ -446,7 +446,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     for (var i = 0; i < cells.length; i++) {
       var cell = cells[i];
       if (!cell.column.hasVisibleCell) continue;
-      if (cell.column.isShowInMultipleColumns) {
+      if (this.matrix.IsMultiplyColumn(cell.column)) {
         this.createMutlipleColumnsFooter(this.footerRow, cell);
       } else {
         var editCell = this.createEditCell(cell);
@@ -639,7 +639,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       if(!cell.hasQuestion) {
         res.cells.push(this.createEmptyCell());
       }
-      else if(cell.cell.column.isShowInMultipleColumns) {
+      else if (this.matrix.IsMultiplyColumn(cell.cell.column)) {
         if(cell.isFirstChoice) {
           res.cells.push(this.createErrorCell(cell.cell));
         } else {
@@ -679,9 +679,12 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     for (var i = 0; i < row.cells.length; i++) {
       let cell = row.cells[i];
       if (!cell.column.hasVisibleCell) continue;
-      if (cell.column.isShowInMultipleColumns) {
+      if (this.matrix.IsMultiplyColumn(cell.column)) {
         this.createMutlipleEditCells(res, cell);
       } else {
+        if (cell.column.isShowInMultipleColumns) {
+          cell.question.visibleChoices.map((c: ItemValue) => c.hideCaption = false);
+        }
         var renderedCell = this.createEditCell(cell);
         res.cells.push(renderedCell);
         if (useAsHeader) {
@@ -752,7 +755,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     for (var i = 0; i < columns.length; i++) {
       var col = columns[i];
       if (col.isVisible && col.hasVisibleCell) {
-        if (col.isShowInMultipleColumns) {
+        if (this.matrix.IsMultiplyColumn(col)) {
           this.createMutlipleVerticalRows(renderedRows, col, i);
         } else {
           const renderedRow = this.createVerticalRow(col, i);
diff --git a/tests/markup/etalon_matrixdropdown.ts b/tests/markup/etalon_matrixdropdown.ts
index 1e46a60b72..d8aebe8837 100644
--- a/tests/markup/etalon_matrixdropdown.ts
+++ b/tests/markup/etalon_matrixdropdown.ts
@@ -40,6 +40,46 @@ registerMarkupTests(
       after: () => StylesManager.applyTheme("default"),
       snapshot: "matrixdynamic-show-in-multiple-columns"
     },
+    {
+      name: "Test matrixdropdown with showInMultipleColumns - mobile",
+      json: {
+        elements: [
+          {
+            titleLocation: "hidden",
+            type: "matrixdropdown",
+            name: "matrix",
+            rows: ["row1"],
+            columns: [
+              {
+                "name": "col1",
+                "cellType": "radiogroup",
+                "showInMultipleColumns": true,
+                "isRequired": true,
+                "choices": [
+                  "Item 1",
+                ]
+              },
+              {
+                "name": "col2",
+                "cellType": "checkbox",
+                "showInMultipleColumns": true,
+                "isRequired": true,
+                "choices": [
+                  "Item 1",
+                  "Item 2",
+                ]
+              }
+            ]
+          },
+        ],
+      },
+      before: () => StylesManager.applyTheme("defaultV2"),
+      initSurvey(survey) {
+        survey.setIsMobile(true);
+      },
+      after: () => StylesManager.applyTheme("default"),
+      snapshot: "matrixdynamic-show-in-multiple-columns-mobile"
+    },
     {
       name: "Test matrixdropdown errors top",
       json: {
@@ -92,7 +132,7 @@ registerMarkupTests(
       },
       after: () => StylesManager.applyTheme("default"),
       snapshot: "matrixdropdown-cell-errors-bottom"
-    }
+    },
   ]
 );
 
diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
new file mode 100644
index 0000000000..d8f8794393
--- /dev/null
+++ b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
@@ -0,0 +1,83 @@
+<div class="sd-table-wrapper">
+	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+		<thead>
+			<tr>
+				<td class="sd-table__cell sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+				</td>
+				<th class="sd-table__cell sd-table__cell--header sd-table__cell--radiogroup">
+					<span class="sv-string-viewer">col1</span>
+					<span>&nbsp;</span>
+					<span class="sd-question__required-text">*</span>
+				</th>
+				<th class="sd-table__cell sd-table__cell--checkbox sd-table__cell--header">
+					<span class="sv-string-viewer">col2</span>
+					<span>&nbsp;</span>
+					<span class="sd-question__required-text">*</span>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" data-responsive-title="row1" title="">
+					<span class="sv-string-viewer">row1</span>
+				</td>
+				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" data-responsive-title="" title="">
+				</td>
+				<td class="sd-table__cell" colspan="1" data-responsive-title="col1" title="col1">
+					<div class="sd-table__question-wrapper">
+						<fieldset class="sd-selectbase sd-selectbase--row" role="presentation">
+							<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+								<label aria-label="Item 1" class="sd-selectbase__label">
+									<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row1cell1i_0" name="col1_testid0row1cell1" type="radio" value="Item 1">
+									<span class="sd-item__decorator sd-radio__decorator">
+									</span>
+									<span class="sd-item__control-label">
+										<span class="sv-string-viewer">Item 1</span>
+									</span>
+								</label>
+							</div>
+						</fieldset>
+					</div>
+				</td>
+				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" data-responsive-title="" title="">
+				</td>
+				<td class="sd-table__cell" colspan="1" data-responsive-title="col2" title="col2">
+					<div class="sd-table__question-wrapper">
+						<fieldset class="sd-selectbase sd-selectbase--row" role="presentation">
+							<legend class="sv-hidden" role="presentation">
+							</legend>
+							<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+								<label aria-label="Item 1" class="sd-selectbase__label">
+									<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_0" name="col2" role="option" type="checkbox" value="Item 1">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-v2check" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-item__control-label">
+										<span class="sv-string-viewer">Item 1</span>
+									</span>
+								</label>
+							</div>
+							<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+								<label aria-label="Item 2" class="sd-selectbase__label">
+									<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_1" name="col2" role="option" type="checkbox" value="Item 2">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-v2check" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-item__control-label">
+										<span class="sv-string-viewer">Item 2</span>
+									</span>
+								</label>
+							</div>
+						</fieldset>
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
\ No newline at end of file