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>