From 9273fe74f08be822c83fe1bfddb31e0b0fd2ad96 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Mon, 28 Aug 2023 16:16:14 +0400
Subject: [PATCH] Work for #6779: fix after render function for imagepicker

---
 src/question_imagepicker.ts  |  6 ++++--
 tests/questionImagepicker.ts | 39 ++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/question_imagepicker.ts b/src/question_imagepicker.ts
index 884daf34c2..1fb3de8d06 100644
--- a/src/question_imagepicker.ts
+++ b/src/question_imagepicker.ts
@@ -411,9 +411,11 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
   private reCalcGapBetweenItemsCallback: () => void;
   public afterRender(el: HTMLElement): void {
     super.afterRender(el);
-    if(el && el.querySelector(this.getObservedElementSelector())) {
+    const selector = this.getObservedElementSelector();
+    const observedElement = el && selector ? el.querySelector(selector): undefined;
+    if(!!observedElement) {
       this.reCalcGapBetweenItemsCallback = () => {
-        this.gapBetweenItems = Math.ceil(Number.parseFloat(window.getComputedStyle(el.querySelector(this.getObservedElementSelector())).gap)) || 16;
+        this.gapBetweenItems = Math.ceil(Number.parseFloat(window.getComputedStyle(observedElement).gap)) || 16;
       };
       this.reCalcGapBetweenItemsCallback();
     }
diff --git a/tests/questionImagepicker.ts b/tests/questionImagepicker.ts
index ede1612288..6d905762ac 100644
--- a/tests/questionImagepicker.ts
+++ b/tests/questionImagepicker.ts
@@ -339,4 +339,43 @@ QUnit.test("check contentNotLoaded and contentMode flags behavior", function(ass
   assert.notOk(choice.contentNotLoaded);
   question.contentMode = "video";
   assert.ok(choice.contentNotLoaded);
+});
+
+QUnit.test("check reCalcGap", function(assert) {
+  const survey = new SurveyModel(
+    {
+      "elements": [
+        {
+          "type": "imagepicker",
+          "name": "question2",
+          "choices": [
+            {
+              "value": "lion",
+              "imageLink": "test"
+            },
+          ],
+        }
+      ]
+    }
+  );
+  const question = <QuestionImagePickerModel>survey.getAllQuestions()[0];
+  survey.css = defaultV2Css;
+  const container = document.createElement("div");
+  const itemsContainer = document.createElement("div");
+  itemsContainer.className = survey.css.imagepicker.root;
+  container.appendChild(itemsContainer);
+
+  assert.notOk(question["reCalcGapBetweenItemsCallback"]);
+  question.afterRender(container);
+  assert.ok(!!question["reCalcGapBetweenItemsCallback"]);
+
+  question["reCalcGapBetweenItemsCallback"] = undefined as any;
+  question.cssClasses.root = "";
+  question.afterRender(container);
+  assert.notOk(!!question["reCalcGapBetweenItemsCallback"]);
+
+  container.innerHTML = "";
+  survey.cssClasses.root = "some-class";
+  question.afterRender(container);
+  assert.notOk(!!question["reCalcGapBetweenItemsCallback"]);
 });
\ No newline at end of file