#9004 A survey is not scrolled to the top when progress bar appears a…

…bove the header - The progress bar is not visible when navigating between pages (#9039) * #9004 A survey is not scrolled to the top when progress bar appears above the header - The progress bar is not visible when navigating between pages Fixes #9004 * use rootElement #9004 * #9004 - fixed fitToContainer + tests * #9004 - check for rootelement * #9004 - callback on scroll change * #9004 do not raise undefined callback Fixes #9004 * #9004 change scrolled element Fixes #9004 * #9004 - fix tests
surveyjs · Nov 14, 2024 · 74d6cd4 · 74d6cd4
1 parent 1c2cb49
commit 74d6cd4
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 3 deletions.
diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts
@@ -47,7 +47,7 @@ import {
 } from "./expressionItems";
 import { ExpressionRunner, ConditionRunner } from "./conditions";
 import { settings } from "./settings";
-import { isContainerVisible, isMobile, mergeValues, activateLazyRenderingChecks, navigateToUrl, getRenderedStyleSize, getRenderedSize, wrapUrlForBackgroundImage, chooseFiles } from "./utils/utils";
+import { isContainerVisible, isMobile, mergeValues, activateLazyRenderingChecks, navigateToUrl, getRenderedStyleSize, getRenderedSize, wrapUrlForBackgroundImage, chooseFiles, classesToSelector } from "./utils/utils";
 import { SurveyError } from "./survey-error";
 import { IAction, Action } from "./actions/action";
 import { ActionContainer } from "./actions/container";
@@ -5373,7 +5373,12 @@ export class SurveyModel extends SurveyElementCore
           });
         }, elementsToRenderBefore);
       } else {
-        SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions, onScolledCallback);
+        if (!elementPage && !this.isSinglePage && !this.isDesignMode && this.rootElement) {
+          const elementToScroll = this.rootElement.querySelector(classesToSelector(this.css.rootWrapper)) as HTMLElement;
+          SurveyElement.ScrollElementToViewCore(elementToScroll, false, scrollIfVisible, scrollIntoViewOptions, onScolledCallback);
+        } else {
+          SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions, onScolledCallback);
+        }
       }
     }
   }

diff --git a/testCafe/survey/navigation.js b/testCafe/survey/navigation.js
@@ -1,4 +1,4 @@
-import { frameworks, url, initSurvey } from "../helper";
+import { frameworks, url, url_test, initSurvey, applyTheme } from "../helper";
 import { ClientFunction, fixture, Selector, test } from "testcafe";
 const title = "navigation";
 
@@ -56,6 +56,79 @@ const tocJson = {
   ]
 };
 
+const scrollJson = {
+  "title": "Survey Title",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  "pages": [
+    {
+      "name": "page1",
+      "elements": [
+        {
+          "type": "comment",
+          "name": "question1"
+        },
+        {
+          "type": "comment",
+          "name": "question2"
+        },
+        {
+          "type": "comment",
+          "name": "question3"
+        },
+        {
+          "type": "comment",
+          "name": "question4"
+        },
+        {
+          "type": "comment",
+          "name": "question5"
+        },
+        {
+          "type": "comment",
+          "name": "question6"
+        },
+        {
+          "type": "comment",
+          "name": "question7"
+        }
+      ]
+    },
+    {
+      "name": "page2",
+      "elements": [
+        {
+          "type": "comment",
+          "name": "question8"
+        },
+        {
+          "type": "comment",
+          "name": "question9"
+        },
+        {
+          "type": "comment",
+          "name": "question10"
+        },
+        {
+          "type": "comment",
+          "name": "question11"
+        },
+        {
+          "type": "comment",
+          "name": "question12"
+        },
+        {
+          "type": "comment",
+          "name": "question13"
+        },
+        {
+          "type": "comment",
+          "name": "question14"
+        }
+      ]
+    }
+  ]
+};
+
 frameworks.forEach((framework) => {
   fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
     async (t) => {
@@ -70,4 +143,38 @@ frameworks.forEach((framework) => {
     await t.click(Selector(".sv-string-viewer").withText("page1"));
     await t.expect(Selector("input[type=text]").value).eql("some text");
   });
+
+});
+frameworks.forEach((framework) => {
+  const theme = "defaultV2";
+  fixture`${framework} ${title} ${theme}`
+    .page`${url_test}${theme}/${framework}`;
+
+  test("Page should be scrolled to top of survey", async (t) => {
+    await applyTheme(theme);
+    await initSurvey(framework, scrollJson);
+
+    await t.scrollIntoView(Selector("input[value=Next]"));
+    await t.click(Selector("input[value=Next]"));
+    await t.expect(ClientFunction(() => document.querySelector("h3").getBoundingClientRect().y)()).gte(0);
+  });
+
+  test("Page should be scrolled to top of survey fit to container", async (t) => {
+    await applyTheme(theme);
+    await initSurvey(framework, scrollJson);
+
+    await ClientFunction(() => {
+      const container = window.document.getElementById("surveyElement");
+      container.style.position = "fixed";
+      container.style.top = 0;
+      container.style.bottom = 0;
+      container.style.left = 0;
+      container.style.right = 0;
+      window.survey.fitToContainer = true;
+    })();
+
+    await t.scrollIntoView(Selector("input[value=Next]"));
+    await t.click(Selector("input[value=Next]"));
+    await t.expect(ClientFunction(() => document.querySelector("h3").getBoundingClientRect().y)()).gte(0);
+  });
 });