The survey.focusFirstQuestionAutomatic / survey.focusFirstQuestion fu… (

#8790) * The survey.focusFirstQuestionAutomatic / survey.focusFirstQuestion function doesn't focus a Dynamic Panel with no input fields fix #8764 * Fix makup tests #8764
surveyjs · Sep 9, 2024 · c666332 · c666332
1 parent fe2e114
commit c666332
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 13 deletions.
diff --git a/...survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.component.html b/...survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.component.html
@@ -1,3 +1,3 @@
-<button type="button" *ngIf="question.canAddPanel" [class]="question.getAddButtonCss()" (click)="addPanelClick()">
+<button type="button" [id]="question.addButtonId" *ngIf="question.canAddPanel" [class]="question.getAddButtonCss()" (click)="addPanelClick()">
 <span [class]="question.cssClasses.buttonAddText"><sv-ng-string [model]="question.locPanelAddText"></sv-ng-string></span>
 </button>
diff --git a/packages/survey-core/src/question_paneldynamic.ts b/packages/survey-core/src/question_paneldynamic.ts
@@ -303,10 +303,14 @@ export class QuestionPanelDynamicModel extends Question
       const res = this.visiblePanelsCore[i].getFirstQuestionToFocus(withError);
       if (!!res) return res;
     }
+    if(this.showAddPanelButton && (!withError || this.currentErrorCount > 0)) return this;
     return null;
   }
-
-  public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
+  protected getFirstInputElementId(): string {
+    if(this.showAddPanelButton) return this.addButtonId;
+    return super.getFirstInputElementId();
+  }
+  public setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void {
     super.setSurveyImpl(value, isLight);
     this.setTemplatePanelSurveyImpl();
     this.setPanelsSurveyImpl();
@@ -1075,6 +1079,9 @@ export class QuestionPanelDynamicModel extends Question
   public set allowAddPanel(val: boolean) {
     this.setPropertyValue("allowAddPanel", val);
   }
+  public get addButtonId(): string {
+    return this.id + "addPanel";
+  }
   /**
    * Specifies the position of newly added panels.
    *
@@ -1789,13 +1796,14 @@ export class QuestionPanelDynamicModel extends Question
       }
     }
     this.updateIsReady();
-    if (this.isReadOnly || !this.allowAddPanel) {
+    if (!this.showAddPanelButton) {
       this.updateNoEntriesTextDefaultLoc();
     }
     this.updateFooterActions();
     this.isBuildingPanelsFirstTime = false;
     this.releaseAnimations();
   }
+  private get showAddPanelButton(): boolean { return this.allowAddPanel && !this.isReadOnly; }
   private get wasNotRenderedInSurvey(): boolean {
     return !this.hasPanelBuildFirstTime && !this.wasRendered && !!this.survey;
   }

diff --git a/packages/survey-core/tests/question_paneldynamic_tests.ts b/packages/survey-core/tests/question_paneldynamic_tests.ts
@@ -7380,4 +7380,23 @@ QUnit.test("Always focus on error in duplicated value, Bug8228", function (asser
   assert.ok(focusedQuestionId, "Focus on the question");
 
   SurveyElement.FocusElement = oldFunc;
-});
+});
+QUnit.test("getFirstQuestionToFocus, Bug#8764", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      { type: "paneldynamic", name: "panel", panelCount: 1,
+        templateElements: [{ type: "text", name: "q1" }, { type: "text", name: "q2", isRequired: true }]
+      }
+    ]
+  });
+  const panel = <QuestionPanelDynamicModel>survey.getQuestionByName("panel");
+  panel.validate(true);
+  assert.equal(panel.getFirstQuestionToFocus(false).name, "q1", "#1");
+  assert.equal(panel.getFirstQuestionToFocus(true).name, "q2", "#2");
+  panel.panelCount = 0;
+  assert.equal(panel.getFirstQuestionToFocus(false).name, "panel", "#3");
+  assert.notOk(panel.getFirstQuestionToFocus(true), "#4");
+  panel.isRequired = true;
+  panel.validate(true);
+  assert.equal(panel.getFirstQuestionToFocus(true).name, "panel", "#5");
+});
diff --git a/packages/survey-react-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.tsx b/packages/survey-react-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.tsx
@@ -25,7 +25,7 @@ export class SurveyQuestionPanelDynamicAddButton extends SurveyQuestionPanelDyna
     if (!this.question.canAddPanel) return null;
     const btnText = this.renderLocString(this.question.locPanelAddText);
     return (
-      <button type="button" className={this.question.getAddButtonCss()} onClick={this.handleClick} >
+      <button type="button" id={this.question.addButtonId} className={this.question.getAddButtonCss()} onClick={this.handleClick} >
         <span className={this.question.cssClasses.buttonAddText}>{btnText}</span>
       </button>
     );

diff --git a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
@@ -1,6 +1,7 @@
 <template>
   <button
     type="button"
+    :id="question.addButtonId"
     v-if="question.canAddPanel"
     :class="question.getAddButtonCss()"
     @click="addPanelClick"

diff --git a/src/knockout/components/paneldynamic-actions/paneldynamic-add-btn.html b/src/knockout/components/paneldynamic-actions/paneldynamic-add-btn.html
@@ -1,5 +1,5 @@
 <!-- ko if: question.koCanAddPanel -->
-<button type="button" data-bind="click: question.koAddPanelClick, css: question.koAddButtonCss, visible: question.koCanAddPanel">
+<button type="button" data-bind="click: question.koAddPanelClick, css: question.koAddButtonCss, visible: question.koCanAddPanel, attr: { id: question.addButtonId }">
   <span data-bind="css: question.cssClasses.buttonAddText"><!-- ko template: { name: 'survey-string', data: question.locPanelAddText } --><!-- /ko --></span>
 </button>
 <!-- /ko -->
diff --git a/src/vue/components/paneldynamic-actions/paneldynamic-add-btn.vue b/src/vue/components/paneldynamic-actions/paneldynamic-add-btn.vue
@@ -1,6 +1,7 @@
 <template>
   <button
     type="button"
+    :id="question.addButtonId"
     v-if="question.canAddPanel"
     :class="question.getAddButtonCss()"
     @click="addPanelClick"

diff --git a/testCafe/questions/paneldynamic.ts b/testCafe/questions/paneldynamic.ts
@@ -578,5 +578,27 @@ frameworks.forEach((framework) => {
 
     await t.expect(Selector(".sv-action.sv-dots").visible).ok();
   });
+  test("Focus first input on adding a new panel, renderMode='tab'", async (t) => {
+    await initSurvey(framework, {
+      focusFirstQuestionAutomatic: true,
+      elements: [
+        {
+          type: "paneldynamic",
+          name: "panel1",
+          panelCount: 0,
+          templateElements: [
+            {
+              type: "text",
+              name: "name"
+            },
+          ],
+        }
+      ]
+    });
+    await t.pressKey("space")
+      .pressKey("1 2 3")
+      .click(Selector(".sd-navigation__complete-btn"));
 
+    await t.expect(await getSurveyResult()).eql({ panel1: [{ name: "123" }] });
+  });
 });
diff --git a/tests/markup/etalon_paneldynamic.ts b/tests/markup/etalon_paneldynamic.ts
@@ -15,6 +15,7 @@ registerMarkupTests(
         },
       ]
     },
+    removeIds: true,
     snapshot: "paneldynamic-progress-top-legacy-navigation",
   },
   {
@@ -47,6 +48,7 @@ registerMarkupTests(
         },
       ]
     },
+    removeIds: true,
     snapshot: "paneldynamic-progress-bottom-legacy-navigation",
   },
   {
@@ -79,10 +81,11 @@ registerMarkupTests(
         },
       ]
     },
+    removeIds: true,
     snapshot: "paneldynamic-list-legacy-navigation",
   },
   {
-    name: "Test paneldynamic (list) markup",
+    name: "Test paneldynamic (list) #1 markup",
     json: {
       questions: [
         {
@@ -99,7 +102,7 @@ registerMarkupTests(
     after: () => StylesManager.applyTheme("default"),
   },
   {
-    name: "Test paneldynamic (list) markup",
+    name: "Test paneldynamic (list) #2 markup",
     json: {
       questions: [
         {
@@ -127,7 +130,7 @@ registerMarkupTests(
     after: () => StylesManager.applyTheme("default"),
   },
   {
-    name: "Test paneldynamic (list) markup",
+    name: "Test paneldynamic (list) #3 markup",
     json: {
       questions: [
         {

diff --git a/tests/markup/snapshots/paneldynamic-list.snap.html b/tests/markup/snapshots/paneldynamic-list.snap.html
@@ -26,7 +26,7 @@
 						</div>
 						<div class="sv-action" id="sv-pd-add-btn">
 							<div class="sv-action__content">
-								<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" type="button">
+								<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" id="testid0addPanel" type="button">
 									<span>
 										<span class="sv-string-viewer">Add new</span>
 									</span>

diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
@@ -52,7 +52,7 @@
 								</div>
 								<div class="sv-action" id="sv-pd-add-btn">
 									<div class="sv-action__content">
-										<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" type="button">
+										<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" id="testid0addPanel" type="button">
 											<span>
 												<span class="sv-string-viewer">Add new</span>
 											</span>

diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
@@ -46,7 +46,7 @@
 								</div>
 								<div class="sv-action" id="sv-pd-add-btn">
 									<div class="sv-action__content">
-										<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" type="button">
+										<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" id="testid0addPanel" type="button">
 											<span>
 												<span class="sv-string-viewer">Add new</span>
 											</span>