Survey should be scrolled on expanding panel if needed to show questi…

…ons without scrolling fix #7486
surveyjs · Dec 11, 2023 · 69345d9 · 69345d9
1 parent ecdc5a3
commit 69345d9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 deletions.
diff --git a/src/panel.ts b/src/panel.ts
@@ -1243,6 +1243,12 @@ export class PanelModelBase extends SurveyElement<Question>
     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
@@ -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<E = any> 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
diff --git 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);
+    });
+  });
 });