fix: keep buttons disabled if the user is being redirected after a form submission

GitOrigin-RevId: 74965c90343bb8a2919fcbab1d08567768e7c057

Author: jonas-jonas

packages/elements-react/api-report/elements-react.api.json

@@ -639,38 +639,25 @@
         {
           "kind": "TypeAlias",
           "canonicalReference": "@ory/elements-react!FormState:type",
-          "docComment": "/**\n * Represents the state of the form based on the flow type and active method. This type is used to determine which part of the form should be displayed.\n *\n * It can be one of the following: - `select_method`: The user is selecting an authentication method. - `provide_identifier`: The user is providing an identifier (e.g., email or username). - `method_active`: An authentication method is active, and the user is interacting with it. - `success_screen`: The flow has successfully completed (only used in the verification flow). - `settings`: The user is in the settings flow.\n */\n",
+          "docComment": "/**\n * Represents the state of the form based on the flow type and active method. This type is used to determine which part of the form should be displayed.\n *\n * It can be one of the following: - `select_method`: The user is selecting an authentication method. - `provide_identifier`: The user is providing an identifier (e.g., email or username). - `method_active`: An authentication method is active, and the user is interacting with it. - `success_screen`: The flow has successfully completed (only used in the verification flow). - `settings`: The user is in the settings flow.\n *\n * In addition, it includes a common properties: - `isSubmitting`: A boolean indicating whether the form is currently being submitted.\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
               "text": "type FormState = "
             },
             {
               "kind": "Reference",
-              "text": "FormStateSelectMethod",
-              "canonicalReference": "@ory/elements-react!FormStateSelectMethod:type"
+              "text": "FlowFormState",
+              "canonicalReference": "@ory/elements-react!~FlowFormState:type"
             },
             {
               "kind": "Content",
-              "text": " | "
-            },
-            {
-              "kind": "Reference",
-              "text": "FormStateProvideIdentifier",
-              "canonicalReference": "@ory/elements-react!FormStateProvideIdentifier:type"
-            },
-            {
-              "kind": "Content",
-              "text": " | "
+              "text": " & "
             },
             {
               "kind": "Reference",
-              "text": "FormStateMethodActive",
-              "canonicalReference": "@ory/elements-react!FormStateMethodActive:type"
-            },
-            {
-              "kind": "Content",
-              "text": " | {\n    current: \"success_screen\";\n} | {\n    current: \"settings\";\n}"
+              "text": "CommonFormStateProperties",
+              "canonicalReference": "@ory/elements-react!~CommonFormStateProperties:type"
             },
             {
               "kind": "Content",
@@ -682,7 +669,7 @@
           "name": "FormState",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 7
+            "endIndex": 4
           }
         },
         {
@@ -714,7 +701,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n} | {\n    type: \"action_clear_active_method\";\n}"
+              "text": ";\n} | {\n    type: \"action_clear_active_method\";\n} | {\n    type: \"form_submit_start\";\n} | {\n    type: \"form_submit_end\";\n} | {\n    type: \"page_redirect\";\n}"
             },
             {
               "kind": "Content",

packages/elements-react/api-report/elements-react.api.md

@@ -79,12 +79,11 @@ export type FlowContextValue = OryFlowContainer & {
     dispatchFormState: Dispatch<FormStateAction>;
 };
 
+// Warning: (ae-forgotten-export) The symbol "FlowFormState" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "CommonFormStateProperties" needs to be exported by the entry point index.d.ts
+//
 // @public
-export type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
-    current: "success_screen";
-} | {
-    current: "settings";
-};
+export type FormState = FlowFormState & CommonFormStateProperties;
 
 // @public
 export type FormStateAction = {
@@ -95,6 +94,12 @@ export type FormStateAction = {
     method: UiNodeGroupEnum;
 } | {
     type: "action_clear_active_method";
+} | {
+    type: "form_submit_start";
+} | {
+    type: "form_submit_end";
+} | {
+    type: "page_redirect";
 };
 
 // @public
@@ -668,7 +673,7 @@ export type VerificationFlowContainer = {
 // dist/index.d.ts:700:5 - (ae-forgotten-export) The symbol "TextRenderer" needs to be exported by the entry point index.d.ts
 // dist/index.d.ts:871:5 - (ae-forgotten-export) The symbol "Locale" needs to be exported by the entry point index.d.ts
 // dist/index.d.ts:875:5 - (ae-forgotten-export) The symbol "LocaleMap" needs to be exported by the entry point index.d.ts
-// dist/index.d.ts:1182:5 - (ae-forgotten-export) The symbol "OrySDK" needs to be exported by the entry point index.d.ts
+// dist/index.d.ts:1212:5 - (ae-forgotten-export) The symbol "OrySDK" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/elements-react/src/components/form/nodes/hooks/useInputProps.tsx

@@ -6,11 +6,15 @@ import { MouseEventHandler } from "react"
 import { useController } from "react-hook-form"
 import { triggerToWindowCall } from "../../../../util/ui"
 import { OryNodeInputInputProps } from "../../../../types"
+import { useOryFlow } from "../../../../context"
 
 export function useInputProps(
   attributes: UiNodeInputAttributes,
   placeholder?: string,
 ): OryNodeInputInputProps {
+  const {
+    formState: { isSubmitting },
+  } = useOryFlow()
   const controller = useController({
     name: attributes.name,
     control: undefined,
@@ -30,6 +34,7 @@ export function useInputProps(
     maxLength: attributes.maxlength,
     autoComplete: attributes.autocomplete,
     placeholder: placeholder || "",
-    disabled: attributes.disabled || !controller.formState.isReady,
+    disabled:
+      attributes.disabled || !controller.formState.isReady || isSubmitting,
   }
 }

packages/elements-react/src/components/form/nodes/renderer/button-renderer.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from "react"
 import { useFormContext } from "react-hook-form"
 import { useDebounceValue } from "usehooks-ts"
-import { useComponents } from "../../../../context"
+import { useComponents, useOryFlow } from "../../../../context"
 import { OryNodeButtonButtonProps } from "../../../../types"
 import { triggerToWindowCall } from "../../../../util/ui"
 import { UiNodeInput } from "../../../../util/utilFixSDKTypesHelper"
@@ -13,6 +13,9 @@ type ButtonRendererProps = {
 export function ButtonRenderer({ node }: ButtonRendererProps) {
   const { Node } = useComponents()
   const { formState, setValue } = useFormContext()
+  const {
+    formState: { isSubmitting },
+  } = useOryFlow()
   const [clicked, setClicked] = useDebounceValue(false, 100)
 
   const handleClick = useCallback(() => {
@@ -28,15 +31,14 @@ export function ButtonRenderer({ node }: ButtonRendererProps) {
     name: node.attributes.name,
     value: node.attributes.value,
     onClick: handleClick,
-    disabled:
-      node.attributes.disabled || !formState.isReady || formState.isSubmitting,
+    disabled: node.attributes.disabled || !formState.isReady || isSubmitting,
   } satisfies OryNodeButtonButtonProps
 
   useEffect(() => {
-    if (!formState.isSubmitting) {
+    if (!isSubmitting) {
       setClicked(false)
     }
-  }, [formState.isSubmitting, setClicked])
+  }, [isSubmitting, setClicked])
 
   return (
     <Node.Button