Work for #6779: fix after render function for imagepicker

surveyjs · Aug 28, 2023 · 9273fe7 · 9273fe7
1 parent f007ac4
commit 9273fe7
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git 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
@@ -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"]);
 });