From 926e71b3fc5fbae5ecce5da819ef534221855e05 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Apr 2024 15:13:19 +0300
Subject: [PATCH] Fixed #8085 - Image picker - The survey width mode doesn't
 change to responsive after setting column count that doesn't fix the
 container's static width value of 720px

---
 src/question_imagepicker.ts  |  3 +++
 tests/surveyquestiontests.ts | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/question_imagepicker.ts b/src/question_imagepicker.ts
index 8ed8a2813f..319e773932 100644
--- a/src/question_imagepicker.ts
+++ b/src/question_imagepicker.ts
@@ -356,6 +356,9 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
   protected needResponsiveness() {
     return this.supportResponsiveness() && this.isDefaultV2Theme;
   }
+  public needResponsiveWidth() {
+    return this.colCount > 2;
+  }
 
   private _width: number;
 
diff --git a/tests/surveyquestiontests.ts b/tests/surveyquestiontests.ts
index 16a7571c78..a511207c37 100644
--- a/tests/surveyquestiontests.ts
+++ b/tests/surveyquestiontests.ts
@@ -7756,3 +7756,15 @@ QUnit.test("matrix.visibleRows and read-only", function (assert) {
   assert.equal(matrix.visibleRows[0].value, "col1", "row1.value");
   assert.equal(matrix.visibleRows[1].value, "col2", "row2.value");
 });
+QUnit.test("QuestionImagePickerModel.needResponsiveWidth", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      { type: "imagepicker", name: "q" }
+    ]
+  });
+  const q = survey.getAllQuestions()[0] as QuestionImagePickerModel;
+  assert.equal(survey.widthMode, "auto", "Auto mode by default");
+  assert.equal(q.needResponsiveWidth(), false, "Not responsive for single column auto width mode");
+  q.colCount = 3;
+  assert.equal(q.needResponsiveWidth(), true, "Responsive in auto mode for several columns");
+});