Fix focus on component in rep-group (#1232)

* fix focus on component in rep-group * added cypress test
Altinn · Jun 6, 2023 · c98ca62 · c98ca62
1 parent 498cb9d
commit c98ca62
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 3 deletions.
diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
@@ -75,9 +75,9 @@ export const ErrorReport = ({ nodes }: IErrorReportProps) => {
         if (childNode?.rowIndex !== undefined) {
           // Set editIndex to rowIndex
           dispatch(
-            FormLayoutActions.repGroupSetMultiPage({
-              groupId: parent.id,
-              page: childNode.rowIndex,
+            FormLayoutActions.updateRepeatingGroupsEditIndex({
+              group: parent.id,
+              index: childNode.rowIndex,
             }),
           );
         }

diff --git a/test/e2e/fixtures/texts.json b/test/e2e/fixtures/texts.json
@@ -22,6 +22,9 @@
   "requiredFieldDateFrom": "Du må fylle ut dato for navneendring",
   "requiredFieldFromValue": "Du må fylle ut 1. endre fra",
   "requiredFieldToValue": "Du må fylle ut 2. endre verdi 123 til ",
+  "requiredOpenRepGroup": "Du må fylle ut åpne repterenede grupper",
+  "requiredComment": "Du må fylle ut kommentarer",
+  "requiredSendersName": "Du må fylle ut oppgave giver navn",
   "securityReasons": "Av sikkerhetshensyn vil verken innholdet i tjenesten eller denne meldingen være synlig i Altinn etter at du har forlatt denne siden",
   "selectNewReportee": "Velg ny aktør under",
   "startingSoon": "Vent litt, vi henter det du trenger",

diff --git a/test/e2e/integration/app-frontend/validation.ts b/test/e2e/integration/app-frontend/validation.ts
@@ -266,4 +266,46 @@ describe('Validation', () => {
       .should('contain.text', texts.next);
     cy.get(appFrontend.errorReport).find('li:contains("Du må fylle ut hvem gjelder saken?")').should('have.length', 1);
   });
+
+  it('Clicking the error report should focus the correct field', () => {
+    cy.interceptLayout('group', (component) => {
+      if (component.id === 'comments') {
+        component.required = true;
+      }
+    });
+    cy.goto('group');
+
+    cy.get(appFrontend.group.prefill.liten).dsCheck();
+    cy.get(appFrontend.group.prefill.stor).dsCheck();
+
+    cy.get(appFrontend.nextButton).click();
+
+    // Check that showGroupToContinue is focused
+    cy.get(appFrontend.nextButton).click();
+    cy.get(appFrontend.errorReport).findByText(texts.requiredOpenRepGroup).click();
+    cy.get(appFrontend.group.showGroupToContinue).find('input').should('be.focused');
+
+    // Check that nested group with multipage gets focus
+    cy.get(appFrontend.group.showGroupToContinue).find('input').dsCheck();
+    cy.get(appFrontend.group.row(0).editBtn).click();
+    cy.get(appFrontend.group.editContainer).find(appFrontend.group.next).click();
+    cy.get(appFrontend.group.row(0).nestedGroup.row(0).comments).type('comment');
+    cy.get(appFrontend.group.saveSubGroup).click();
+    cy.get(appFrontend.group.addNewItemSubGroup).click();
+    cy.get(appFrontend.group.saveSubGroup).click();
+    cy.get(appFrontend.group.row(0).nestedGroup.row(0).editBtn).click();
+    cy.get(appFrontend.group.editContainer).find(appFrontend.group.next).click();
+    cy.get(appFrontend.group.row(0).editBtn).click();
+    cy.get(appFrontend.group.row(2).editBtn).click();
+    cy.get(appFrontend.errorReport).findByText(texts.requiredComment).click();
+    cy.get(appFrontend.group.row(0).nestedGroup.row(1).comments).should('be.focused');
+
+    // Check that switching page works
+    cy.get(appFrontend.group.row(0).nestedGroup.row(1).comments).type('comment2');
+    cy.get(appFrontend.group.row(0).editBtn).click();
+    cy.gotoNavPage('summary');
+    cy.get(appFrontend.sendinButton).click();
+    cy.get(appFrontend.errorReport).findByText(texts.requiredSendersName).click();
+    cy.get(appFrontend.group.sendersName).should('be.focused');
+  });
 });
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
@@ -224,6 +224,7 @@ export class AppFrontend {
       deleteBtn: `#group-mainGroup-table-body > tr:nth-child(${idx + 1}) [data-testid=delete-button]`,
       nestedGroup: {
         row: (subIdx: number) => ({
+          comments: `#comments-${idx}-${subIdx}`,
           uploadTagMulti: makeUploaderSelectors('subUploader', `${idx}-${subIdx}`, 2, 'tagged'),
           nestedDynamics: `#nestedDynamics-${idx}-${subIdx} input[type=checkbox]`,
           nestedOptions: [