Merge pull request #8615 from surveyjs/bug/8602-no-scroll-to-page

[survey-react-ui] A web page is automatically scrolled to a survey
surveyjs · Jul 26, 2024 · fc9f88f · fc9f88f
2 parents a66a01b + aa06194
commit fc9f88f
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 3 deletions.
diff --git a/src/survey.ts b/src/survey.ts
@@ -3571,6 +3571,9 @@ export class SurveyModel extends SurveyElementCore
         oldValue.passed = true;
       }
     }
+    if (this.isCurrentPageRendered === true) {
+      this.isCurrentPageRendered = false;
+    }
     this.onCurrentPageChanged.fire(this, options);
   }
   private notifyQuestionsOnHidingContent(page: PageModel): void {
@@ -4903,15 +4906,15 @@ export class SurveyModel extends SurveyElementCore
     options.question = question;
     this.onUpdateChoiceItemCss.fire(this, options);
   }
-  private isFirstPageRendering: boolean = true;
   private isCurrentPageRendering: boolean = true;
+  private isCurrentPageRendered: boolean = undefined;
   afterRenderPage(htmlElement: HTMLElement) {
     if (!this.isDesignMode && !this.focusingQuestionInfo) {
-      const doScroll = !this.isFirstPageRendering;
+      const doScroll = this.isCurrentPageRendered === false;
       setTimeout(() => this.scrollToTopOnPageChange(doScroll), 1);
     }
     this.focusQuestionInfo();
-    this.isFirstPageRendering = false;
+    this.isCurrentPageRendered = true;
     if (this.onAfterRenderPage.isEmpty) return;
     this.onAfterRenderPage.fire(this, {
       page: this.activePage,

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -17285,6 +17285,78 @@ QUnit.test("no scrolling to page top after focus a question on another page - ht
   }, 2);
 });
 
+QUnit.test("scrolling to page top after current page changed", function (assert) {
+  const done1 = assert.async();
+  const done2 = assert.async();
+  const done3 = assert.async();
+  const timeOut = 2;
+
+  const survey = new SurveyModel({
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "radiogroup",
+            "name": "q1",
+            "choices": ["Item 3"]
+          }
+        ]
+      },
+      {
+        "name": "page2",
+        "elements": [
+          {
+            "type": "dropdown",
+            "name": "q2",
+            "choices": ["Item 1"]
+          }
+        ]
+      }
+    ]
+  });
+  let scrollCount = 0;
+  survey.onScrollingElementToTop.add((s, o) => {
+    scrollCount++;
+  });
+
+  assert.equal(survey["isCurrentPageRendered"] === undefined, true, "load survey");
+
+  survey.afterRenderPage(<HTMLElement>{});
+  assert.equal(survey["isCurrentPageRendered"] === true, true, "render first page #1");
+
+  survey.afterRenderPage(<HTMLElement>{});
+  assert.equal(survey["isCurrentPageRendered"] === true, true, "render first page #2");
+
+  setTimeout(() => {
+    assert.equal(scrollCount, 0);
+
+    survey.nextPage();
+    assert.equal(survey["isCurrentPageRendered"] === false, true, "go to second page");
+
+    survey.afterRenderPage(<HTMLElement>{});
+    assert.equal(survey["isCurrentPageRendered"] === true, true, "render second page");
+
+    setTimeout(() => {
+      assert.equal(scrollCount, 1, "scrolling after going to second page");
+
+      survey.prevPage();
+      assert.equal(survey["isCurrentPageRendered"] === false, true, "go to first page");
+
+      survey.afterRenderPage(<HTMLElement>{});
+      assert.equal(survey["isCurrentPageRendered"] === true, true, "render first page #3");
+
+      setTimeout(() => {
+        assert.equal(scrollCount, 2, "scrolling after back to first page");
+
+        done3();
+      }, timeOut);
+      done2();
+    }, timeOut);
+    done1();
+  }, timeOut);
+});
+
 QUnit.test("check descriptionLocation change css classes", function (assert) {
   const survey = new SurveyModel({
     "pages": [