From aa06194054c34bd566f9f5749e0a1e4b082e8661 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Thu, 25 Jul 2024 17:03:50 +0300 Subject: [PATCH] resolve #8602 [survey-react-ui] A web page is automatically scrolled to focus a survey --- src/survey.ts | 9 ++++-- tests/surveytests.ts | 72 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 3 deletions(-) diff --git a/src/survey.ts b/src/survey.ts index ae39bd418e..2ec97cedad 100644 --- 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 index f979ab38d4..62d8527528 100644 --- 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({}); + assert.equal(survey["isCurrentPageRendered"] === true, true, "render first page #1"); + + survey.afterRenderPage({}); + 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({}); + 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({}); + 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": [