Scroll to the first question generated an error: #20

surveyjs · Jun 13, 2016 · 41009fc · 41009fc
1 parent e5fa14c
commit 41009fc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/knockout/templates/question.html b/src/knockout/templates/question.html
@@ -1,5 +1,5 @@
 <script type="text/html" id="survey-question">
-    <div data-bind="visible: question.koVisible(), css: $root.css.question.root">
+    <div data-bind="visible: question.koVisible(), css: $root.css.question.root, attr: {id: id}">
         <!-- ko if: question.hasTitle -->
         <h5 data-bind="text: question.koNo() +  (question.isRequired ? question.requiredText : '') + question.processedTitle, css: $root.css.question.title"></h5>
         <!-- /ko -->

diff --git a/src/questionbase.ts b/src/questionbase.ts
@@ -2,7 +2,12 @@
 /// <reference path="jsonobject.ts" />
 module Survey {
     export class QuestionBase extends Base implements IQuestion {
+        private static questionCounter = 100;
+        private static getQuestionId(): string {
+            return "sq_" + QuestionBase.questionCounter++;
+        }
         protected data: ISurvey;
+        private idValue: string;
         private visibleValue: boolean = true;
         private visibleIndexValue: number = -1;
         public width: string = "100%";
@@ -12,6 +17,7 @@ module Survey {
 
         constructor(public name: string) {
             super();
+            this.idValue = QuestionBase.getQuestionId();
             this.onCreating();
         }
         public get visible(): boolean { return this.visibleValue; }
@@ -27,7 +33,12 @@ module Survey {
         public hasErrors(): boolean { return false; }
         public get hasTitle(): boolean { return false; }
         public get hasComment(): boolean { return false; }
+        public get id(): string { return this.idValue; }
         public focus() {
+            var el = document.getElementById(this.id);
+            if (!!el && el.scrollIntoView) {
+                el.scrollIntoView();
+            }
             this.fireCallback(this.focusCallback);
         }
         setData(newValue: ISurvey) {

diff --git a/src/react/reactquestion.tsx b/src/react/reactquestion.tsx
@@ -50,7 +50,7 @@ class ReactSurveyQuestion extends React.Component<any, any> {
         var comment = (this.question && this.question.hasComment) ? this.renderComment() : null;
         var errors = (this.question && this.question.errors.length > 0) ? this.renderErrors() : null;
         return (
-            <div className={this.css.question.root}>
+            <div id={this.questionBase.id} className={this.css.question.root}>
                 {title}
                 {errors}
                 {questionRender}