From 62bf68ded53a9b58dec4cc95c257a327ba194bf4 Mon Sep 17 00:00:00 2001
From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:04:39 +0200
Subject: [PATCH] fix: button with formnovalidate

---
 .../ory/helpers/node.spec.tsx                 | 72 +++++++++++++++++++
 src/react-components/ory/helpers/node.tsx     |  2 +-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/src/react-components/ory/helpers/node.spec.tsx b/src/react-components/ory/helpers/node.spec.tsx
index aadb9bd4f..ebec3c0c6 100644
--- a/src/react-components/ory/helpers/node.spec.tsx
+++ b/src/react-components/ory/helpers/node.spec.tsx
@@ -160,3 +160,75 @@ test("uiTextToFormattedMessage on a list", async ({ mount }) => {
   await expect(component).toContainText("te45pbc0")
   await expect(component).toContainText("q3vvtd4i")
 })
+
+test("button with id 1070007 or 1070008 should have formNoValidate", async ({
+  mount,
+}) => {
+  await test.step("button with id 1070007", async () => {
+    const component = await mount(
+      <Node
+        node={{
+          type: "input",
+          group: "default",
+          attributes: {
+            id: "111111",
+            name: "resend",
+            value: "code",
+            type: "submit",
+            node_type: "input",
+            required: true,
+            disabled: false,
+          },
+          messages: [],
+          meta: {
+            label: {
+              id: 1070007,
+              text: "",
+              type: "info",
+            },
+          },
+        }}
+      />,
+    )
+
+    // formnovalidate is inline and won't work with the .toHaveAttribute matcher
+    await expect(component.locator("[formnovalidate]")).toBeAttached()
+    // text is injected from the translation file
+    await expect(component).toHaveText("Email")
+
+    await component.unmount()
+  })
+
+  await test.step("button with id 1070008", async () => {
+    const component = await mount(
+      <Node
+        node={{
+          type: "input",
+          group: "default",
+          attributes: {
+            id: "111111",
+            name: "resend",
+            value: "code",
+            type: "submit",
+            node_type: "input",
+            required: true,
+            disabled: false,
+          },
+          messages: [],
+          meta: {
+            label: {
+              id: 1070008,
+              text: "",
+              type: "info",
+            },
+          },
+        }}
+      />,
+    )
+
+    // formnovalidate is inline and won't work with the .toHaveAttribute matcher
+    await expect(component.locator("[formnovalidate]")).toBeAttached()
+    // text is injected from the translation file
+    await expect(component).toHaveText("Resend code")
+  })
+})
diff --git a/src/react-components/ory/helpers/node.tsx b/src/react-components/ory/helpers/node.tsx
index 8fdb62737..9013594c2 100644
--- a/src/react-components/ory/helpers/node.tsx
+++ b/src/react-components/ory/helpers/node.tsx
@@ -288,7 +288,7 @@ export const Node = ({
 
         // the recovery code resend button
         if (
-          node.meta.label?.id === 1070007 ?? // TODO: remove this once everyone has migrated to the fix (https://github.com/ory/kratos/pull/3067)
+          node.meta.label?.id === 1070007 || // TODO: remove this once everyone has migrated to the fix (https://github.com/ory/kratos/pull/3067)
           node.meta.label?.id === 1070008
         ) {
           // on html forms the required flag on an input field will prevent the form from submitting.