From 69345d9f58bb2f0a400d52e7891af82d5f01d0de Mon Sep 17 00:00:00 2001 From: Andrew Telnov Date: Mon, 11 Dec 2023 16:01:17 +0200 Subject: [PATCH] Survey should be scrolled on expanding panel if needed to show questions without scrolling fix #7486 --- src/panel.ts | 6 +++ src/survey-element.ts | 17 ++++--- .../etalons/panel-scroll-on-expand.png | Bin 0 -> 7574 bytes .../tests/defaultV2/panel.ts | 46 ++++++++++++++++++ 4 files changed, 62 insertions(+), 7 deletions(-) create mode 100644 visualRegressionTests/tests/defaultV2/etalons/panel-scroll-on-expand.png diff --git a/src/panel.ts b/src/panel.ts index 9eb5f32fb1..2089b25674 100644 --- a/src/panel.ts +++ b/src/panel.ts @@ -1243,6 +1243,12 @@ export class PanelModelBase extends SurveyElement if(this.isCollapsed) { this.questions.forEach(q => q.onHidingContent()); } + if(this.survey != null && !this.isLoadingFromJson && this.isExpanded) { + const q = this.getFirstQuestionToFocus(false); + if(!!q) { + setTimeout(() => { this.survey.scrollElementToTop(q, q, null, q.inputId, false); }, 15); + } + } } /** diff --git a/src/survey-element.ts b/src/survey-element.ts index 70910dd82d..fa86203fe9 100644 --- a/src/survey-element.ts +++ b/src/survey-element.ts @@ -1,5 +1,4 @@ import { JsonObjectProperty, Serializer, property } from "./jsonobject"; -import { RendererFactory } from "./rendererFactory"; import { Base } from "./base"; import { Action, IAction } from "./actions/action"; import { AdaptiveActionContainer } from "./actions/adaptive-container"; @@ -167,13 +166,17 @@ export class SurveyElement extends SurveyElementCore implements ISurvey const el = root.getElementById(elementId); if (!el || !el.scrollIntoView) return false; const elemTop: number = scrollIfVisible ? -1 : el.getBoundingClientRect().top; - if (elemTop < 0) el.scrollIntoView(); - return elemTop < 0; + let needScroll = elemTop < 0; + if(!needScroll && !!window) { + const height = window.innerHeight; + needScroll = height > 0 && height < elemTop; + } + if (needScroll) { + el.scrollIntoView(); + } + return needScroll; } - public static GetFirstNonTextElement( - elements: any, - removeSpaces: boolean = false - ) { + public static GetFirstNonTextElement(elements: any, removeSpaces: boolean = false): any { if (!elements || !elements.length || elements.length == 0) return null; if (removeSpaces) { let tEl = elements[0]; diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-scroll-on-expand.png b/visualRegressionTests/tests/defaultV2/etalons/panel-scroll-on-expand.png new file mode 100644 index 0000000000000000000000000000000000000000..c10430de8f22b6fe342963b12f23938ea1c81659 GIT binary patch literal 7574 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 Uwk)6t8m%<2YkKO1S8PN72e#`)JOBUy literal 0 HcmV?d00001 diff --git a/visualRegressionTests/tests/defaultV2/panel.ts b/visualRegressionTests/tests/defaultV2/panel.ts index c7a33291af..4f66a8a395 100644 --- a/visualRegressionTests/tests/defaultV2/panel.ts +++ b/visualRegressionTests/tests/defaultV2/panel.ts @@ -671,4 +671,50 @@ frameworks.forEach(framework => { await takeElementScreenshot("responsive-question-inside-panels-in-creator.png", panelRoot, t, comparer); }); }); + test("Scroll into view if needed on expanding panel", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(400, 600); + await initSurvey(framework, { + showNavigationButtons: "none", + width: "500px", + elements: [ + { + type: "comment", + name: "q1" + }, + { + type: "comment", + name: "q2" + }, + { + type: "comment", + name: "q3" + }, + { + type: "comment", + name: "q4" + }, + { + type: "panel", + name: "panel", + state: "collapsed", + elements: [ + { + type: "comment", + name: "panel_q1" + }, + { + type: "comment", + name: "panel_q2" + } + ] + }, + ] + }); + await t.scrollBy(0, 400); + const panelTitle = Selector(".sd-panel__title"); + await t.click(panelTitle); + await takeElementScreenshot("panel-scroll-on-expand.png", null, t, comparer); + }); + }); }); \ No newline at end of file