From e0b67b63d99a21e07426319a088168a942bd0e69 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Thu, 24 Oct 2024 14:25:37 -0600
Subject: [PATCH] Submit form on Enter press (#5419)

---
 clients/admin-ui/cypress/e2e/datamap-report.cy.ts      | 10 +++++++++-
 .../admin-ui/src/features/common/table/v2/cells.tsx    |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/clients/admin-ui/cypress/e2e/datamap-report.cy.ts b/clients/admin-ui/cypress/e2e/datamap-report.cy.ts
index f0d662925b..0e72f037bf 100644
--- a/clients/admin-ui/cypress/e2e/datamap-report.cy.ts
+++ b/clients/admin-ui/cypress/e2e/datamap-report.cy.ts
@@ -299,6 +299,15 @@ describe("Data map report table", () => {
         cy.getByTestId("rename-columns-reset-btn").click({ force: true });
         cy.getByTestId("column-data_use").should("contain.text", "Data use");
       });
+      it("should support pressing the Enter key to apply renamed columns", () => {
+        cy.getByTestId("more-menu").click();
+        cy.getByTestId("rename-columns-btn").click();
+        cy.getByTestId("column-data_use-input").type("Custom Title{enter}");
+        cy.getByTestId("column-data_use").should(
+          "contain.text",
+          "Custom Title",
+        );
+      });
     });
   });
 
@@ -351,7 +360,6 @@ describe("Data map report table", () => {
       }).as("getEmptyCustomReports");
       cy.getByTestId("custom-reports-trigger").click();
       cy.getByTestId("custom-reports-popover").should("be.visible");
-      cy.wait("@getEmptyCustomReports");
       cy.getByTestId("custom-reports-empty-state").should("be.visible");
     });
     it("should list the available reports in the popover", () => {
diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx
index a6c0280df4..b04076f2e9 100644
--- a/clients/admin-ui/src/features/common/table/v2/cells.tsx
+++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx
@@ -19,7 +19,7 @@ import {
   useToast,
   WarningIcon,
 } from "fidesui";
-import { useField } from "formik";
+import { useField, useFormikContext } from "formik";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
@@ -333,6 +333,7 @@ export const EditableHeaderCell = <T,>({
 }) => {
   const headerId = props.column.columnDef.id || "";
   const [field] = useField(headerId);
+  const { submitForm } = useFormikContext();
   return isEditing ? (
     <Input
       {...field}
@@ -341,6 +342,7 @@ export const EditableHeaderCell = <T,>({
       aria-label="Edit column name"
       size="small"
       data-testid={`column-${headerId}-input`}
+      onPressEnter={submitForm}
     />
   ) : (
     <DefaultHeaderCell value={value} {...props} />