Impement smooth scroll to question (#8913)

* Impement smooth scroll to question * Try to fix f tests * Try to fix f tests * Fix f test in knockout
surveyjs · Oct 9, 2024 · 8c6e29e · 8c6e29e
1 parent 91fe260
commit 8c6e29e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 24 deletions.
diff --git a/packages/survey-core/src/base-interfaces.ts b/packages/survey-core/src/base-interfaces.ts
@@ -239,7 +239,9 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
     question: IQuestion,
     page: IPage,
     id: string, scrollIfVisible?: boolean,
-    scrollIntoViewOptions?: ScrollIntoViewOptions
+    scrollIntoViewOptions?: ScrollIntoViewOptions,
+    passedRootElement?: HTMLElement,
+    onScolledCallback?: () => void
   ): any;
   runExpression(expression: string, callback?: (res: any) => void): any;
   elementContentVisibilityChanged(element: ISurveyElement): void;

diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
@@ -1244,15 +1244,16 @@ export class Question extends SurveyElement<Question>
     if (shouldChangePage) {
       this.survey.focusQuestionByInstance(this, onError);
     } else {
-      this.focuscore(onError, scrollIfVisible);
-    }
-  }
-  private focuscore(onError: boolean = false, scrollIfVisible?: boolean): void {
-    if (!!this.survey) {
-      this.expandAllParents();
-      this.survey.scrollElementToTop(this, this, null, this.id, scrollIfVisible);
+      if (!!this.survey) {
+        this.expandAllParents();
+        const scrollOptions: ScrollIntoViewOptions = (this.survey as SurveyModel)["isSmoothScrollEnabled"] ? { behavior: "smooth" } : undefined;
+        this.survey.scrollElementToTop(this, this, null, this.id, scrollIfVisible, scrollOptions, undefined, () => {
+          this.focusInputElement(onError);
+        });
+      } else {
+        this.focusInputElement(onError);
+      }
     }
-    this.focusInputElement(onError);
   }
   focusInputElement(onError: boolean): void {
     const id = !onError ? this.getFirstInputElementId() : this.getFirstErrorInputElementId();

diff --git a/packages/survey-core/src/survey-element.ts b/packages/survey-core/src/survey-element.ts
@@ -225,18 +225,6 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
         requestAnimationFrame(checkPos);
       };
       DomWindowHelper.requestAnimationFrame(checkPos);
-      // let currPageXOffset = window.pageXOffset;
-      // let currPageYOffset = window.pageYOffset;
-      // var scrollDone = setInterval(() => {
-      //   DomWindowHelper.requestAnimationFrame(() => {
-      //     if (currPageXOffset == window.pageXOffset && currPageYOffset == window.pageYOffset) {
-      //       clearInterval(scrollDone);
-      //       doneCallback();
-      //     }
-      //     currPageXOffset = window.pageXOffset;
-      //     currPageYOffset = window.pageYOffset;
-      //   });
-      // }, 25);
     }
   }
   public static ScrollElementToTop(elementId: string, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions, doneCallback?: () => void): boolean {
@@ -246,10 +234,15 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
     return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible, scrollIntoViewOptions, doneCallback);
   }
   public static ScrollElementToViewCore(el: HTMLElement, checkLeft: boolean, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions, doneCallback?: () => void): boolean {
-    if (!el || !el.scrollIntoView) return false;
+    if (!el || !el.scrollIntoView) {
+      doneCallback && doneCallback();
+      return false;
+    }
     const needScroll = SurveyElement.IsNeedScrollIntoView(el, checkLeft, scrollIfVisible);
     if (needScroll) {
       SurveyElement.ScrollIntoView(el, scrollIntoViewOptions, doneCallback);
+    } else {
+      doneCallback && doneCallback();
     }
     return needScroll;
   }

diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts
@@ -4906,6 +4906,7 @@ export class SurveyModel extends SurveyElementCore
       .append(this.css.rootFitToContainer, this.fitToContainer)
       .toString();
   }
+  private isSmoothScrollEnabled = false;
   private resizeObserver: ResizeObserver;
   afterRenderSurvey(htmlElement: any) {
     this.destroyResizeObserver();
@@ -5289,7 +5290,8 @@ export class SurveyModel extends SurveyElementCore
   scrollElementToTop(
     element: ISurveyElement, question: Question, page: PageModel,
     id: string, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions,
-    passedRootElement?: HTMLElement
+    passedRootElement?: HTMLElement,
+    onScolledCallback?: () => void
   ): any {
     const options: ScrollingElementToTopEvent = {
       element: element,
@@ -5313,10 +5315,11 @@ export class SurveyModel extends SurveyElementCore
           SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions, () => {
             this.releaseLazyRendering();
             activateLazyRenderingChecks(elementPage.id);
+            onScolledCallback && onScolledCallback();
           });
         }, elementsToRenderBefore);
       } else {
-        SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions);
+        SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions, onScolledCallback);
       }
     }
   }

diff --git a/testCafe/survey/focusFirstQuestionAutomatic.ts b/testCafe/survey/focusFirstQuestionAutomatic.ts
@@ -95,6 +95,7 @@ frameworks.forEach(async framework => {
     await t.expect(panel1_q1Sel.filter(filterIsInViewport).exists).ok()
       .pressKey("a");
     await focusQuestion("q1", false);
+    await t.wait(1000);
     await t.expect(q1Sel.filter(filterIsInViewport).exists).ok()
       .pressKey("b");
     await focusQuestion("panel1_q1", true);