From c98ca623df7246c77610e5209ec35aafe03a48f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rnar=20=C3=98sttveit?=
 <47412359+bjosttveit@users.noreply.github.com>
Date: Tue, 6 Jun 2023 12:40:24 +0200
Subject: [PATCH] Fix focus on component in rep-group (#1232)

* fix focus on component in rep-group

* added cypress test
---
 src/components/message/ErrorReport.tsx        |  6 +--
 test/e2e/fixtures/texts.json                  |  3 ++
 .../integration/app-frontend/validation.ts    | 42 +++++++++++++++++++
 test/e2e/pageobjects/app-frontend.ts          |  1 +
 4 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
index e3e3b7f83a..1bd3409c8b 100644
--- 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
index 07ba4015ec..4907ac7fce 100644
--- 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
index 2f469e8ea6..e2ac2cb662 100644
--- 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
index 54dfb6a55b..77dade1119 100644
--- 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: [