From 74d6cd4cf6020d8a1f58690666fa6121e7db07c0 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Thu, 14 Nov 2024 10:29:52 +0300 Subject: [PATCH] #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 (#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 --- packages/survey-core/src/survey.ts | 9 ++- testCafe/survey/navigation.js | 109 ++++++++++++++++++++++++++++- 2 files changed, 115 insertions(+), 3 deletions(-) diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts index 2544501311..e43604c336 100644 --- 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 index aa9bf10fde..44306fa5c7 100644 --- 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); + }); });