Survey fit in container (#6846)

* work for #6654 Survey fit in container * work for #6654 fix vue * work for #6654 fix scroll in react --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Sep 4, 2023 · d8c92c3 · d8c92c3
1 parent b148c2b
commit d8c92c3
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 16 deletions.
diff --git a/src/knockout/templates/index.html b/src/knockout/templates/index.html
@@ -4,7 +4,7 @@
 </script>
 
 <script type="text/html" id="survey-content-template">
-  <div data-bind="css: rootCss, elementStyle: themeVariables">
+  <div data-bind="css: rootCss, elementStyle: themeVariables, event: { scroll: $data.onScroll }">
       <!-- ko if: !!renderBackgroundImage -->
       <div data-bind="css: css.rootBackgroundImage, style: backgroundImageStyle"></div>
       <!-- /ko -->

diff --git a/src/popup-survey.ts b/src/popup-survey.ts
@@ -40,15 +40,6 @@ export class PopupSurveyModel extends Base {
     this.width = this.survey.width;
     this.updateCss();
     this.onCreating();
-    this.survey.onPopupVisibleChanged.add((_, opt) => {
-      if(opt.visible) {
-        this.onScrollCallback = () => {
-          opt.popup.toggleVisibility();
-        };
-      } else {
-        this.onScrollCallback = undefined;
-      }
-    });
   }
   protected onCreating(): void { }
   public getType(): string {
@@ -223,11 +214,8 @@ export class PopupSurveyModel extends Base {
           : 0;
     }
   }
-  private onScrollCallback: () => void;
   public onScroll(): void {
-    if(this.onScrollCallback) {
-      this.onScrollCallback();
-    }
+    this.survey.onScroll();
   }
 }
 /**

diff --git a/src/survey.ts b/src/survey.ts
@@ -925,6 +925,16 @@ export class SurveyModel extends SurveyElementCore
     this.notifier = new Notifier(this.css.saveData);
     this.notifier.addAction(this.createTryAgainAction(), "error");
 
+    this.onPopupVisibleChanged.add((_, opt) => {
+      if(opt.visible) {
+        this.onScrollCallback = () => {
+          opt.popup.toggleVisibility();
+        };
+      } else {
+        this.onScrollCallback = undefined;
+      }
+    });
+
     this.layoutElements.push({
       id: "timerpanel",
       template: "survey-timerpanel",
@@ -4525,6 +4535,7 @@ export class SurveyModel extends SurveyElementCore
       htmlElement: htmlElement,
     });
     this.rootElement = htmlElement;
+    this.addScrollEventListener();
   }
   private processResponsiveness(width: number, mobileWidth: number): boolean {
     const isMobile = width < mobileWidth;
@@ -7228,8 +7239,25 @@ export class SurveyModel extends SurveyElementCore
     if (this.disposeCallback) {
       this.disposeCallback();
     }
+    this.removeScrollEventListener();
   }
   disposeCallback: () => void;
+
+  private onScrollCallback: () => void;
+  public onScroll(): void {
+    if(this.onScrollCallback) {
+      this.onScrollCallback();
+    }
+  }
+  public addScrollEventListener(): void {
+    this.scrollHandler = () => { this.onScroll(); };
+    this.rootElement.addEventListener("scroll", this.scrollHandler);
+  }
+  public removeScrollEventListener(): void {
+    if (!!this.scrollHandler) {
+      this.rootElement.removeEventListener("scroll", this.scrollHandler);
+    }
+  }
 }
 
 function isStrCiEqual(a: string, b: string) {

diff --git a/tests/surveyWindowTests.ts b/tests/surveyWindowTests.ts
@@ -95,10 +95,10 @@ QUnit.test("Check that popups inside survey are closed when scrolling container"
   const model = new PopupSurveyModel({ elements: [{ type: "dropdown", name: "q1", choices: ["Item1", "Item2", "Item3"] }] });
   const question = <QuestionDropdownModel>model.survey.getAllQuestions()[0];
   question.dropdownListModel.popupModel.toggleVisibility();
-  assert.ok(model["onScrollCallback"]);
+  assert.ok(model.survey["onScrollCallback"]);
   assert.ok(question.dropdownListModel.popupModel.isVisible);
   model.onScroll();
   assert.notOk(question.dropdownListModel.popupModel.isVisible);
-  assert.notOk(model["onScrollCallback"]);
+  assert.notOk(model.survey["onScrollCallback"]);
   model.onScroll();
 });
diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -17632,3 +17632,14 @@ QUnit.test("page/panel delete do it recursively", function (assert) {
   assert.equal(p1.isDisposed, true, "p1.isDisposed");
   assert.equal(q1.isDisposed, true, "q1.isDisposed");
 });
+QUnit.test("SurveyModel: Check that popups inside survey are closed when scrolling container", (assert): any => {
+  const model = new SurveyModel({ elements: [{ type: "dropdown", name: "q1", choices: ["Item1", "Item2", "Item3"] }] });
+  const question = <QuestionDropdownModel>model.getAllQuestions()[0];
+  question.dropdownListModel.popupModel.toggleVisibility();
+  assert.ok(model["onScrollCallback"]);
+  assert.ok(question.dropdownListModel.popupModel.isVisible);
+  model.onScroll();
+  assert.notOk(question.dropdownListModel.popupModel.isVisible);
+  assert.notOk(model["onScrollCallback"]);
+  model.onScroll();
+});