fix: inputComponents now get stable callbacks (#819)

supertokens · May 13, 2024 · 8b0919c · 8b0919c
1 parent 2c00ac1
commit 8b0919c
Show file tree

Hide file tree

Showing 24 changed files with 65 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.41.1] - 2024-05-13
+
+### Fixes
+
+-   Custom `inputComponents` (in sign in/up form fields) now get reference-stable callbacks.
+
 ## [0.41.0] - 2024-05-09
 
 ### Breaking changes

diff --git a/examples/for-tests/src/App.js b/examples/for-tests/src/App.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import "./App.css";
 
 import AppWithoutRouter from "./AppWithoutRouter";
@@ -289,21 +289,31 @@ const incorrectFormFields = [
     },
 ];
 
+const DropdownInputComponent = ({ value, name, onChange }) => {
+    const onChangeRef = useRef(onChange);
+
+    if (onChangeRef.current !== onChange) {
+        throw new Error("callbacks passed to inputComponents should be reference stable");
+    }
+
+    return (
+        <select value={value} name={name} onChange={(e) => onChange(e.target.value)}>
+            <option value="" disabled hidden>
+                Select an option
+            </option>
+            <option value="option 1">Option 1</option>
+            <option value="option 2">Option 2</option>
+            <option value="option 3">Option 3</option>
+        </select>
+    );
+};
+
 const customFields = [
     {
         id: "select-dropdown",
         label: "Select Dropdown",
         nonOptionalErrorMsg: "Select dropdown is not an optional",
-        inputComponent: ({ value, name, onChange }) => (
-            <select value={value} name={name} onChange={(e) => onChange(e.target.value)}>
-                <option value="" disabled hidden>
-                    Select an option
-                </option>
-                <option value="option 1">Option 1</option>
-                <option value="option 2">Option 2</option>
-                <option value="option 3">Option 3</option>
-            </select>
-        ),
+        inputComponent: DropdownInputComponent,
         optional: true,
     },
     {

diff --git a/lib/build/components/assets/blockedIcon.d.ts b/lib/build/components/assets/blockedIcon.d.ts
diff --git a/lib/build/components/assets/otpEmailIcon.d.ts b/lib/build/components/assets/otpEmailIcon.d.ts
diff --git a/lib/build/components/assets/otpSMSIcon.d.ts b/lib/build/components/assets/otpSMSIcon.d.ts
diff --git a/lib/build/components/assets/totpIcon.d.ts b/lib/build/components/assets/totpIcon.d.ts
diff --git a/lib/build/emailpassword-shared9.js b/lib/build/emailpassword-shared9.js
diff --git a/lib/build/genericComponentOverrideContext.js b/lib/build/genericComponentOverrideContext.js
diff --git a/lib/build/recipe/emailpassword/components/library/formRow.d.ts b/lib/build/recipe/emailpassword/components/library/formRow.d.ts
diff --git a/lib/build/recipe/multitenancy/components/themes/dynamicLoginMethodsSpinner/index.d.ts b/lib/build/recipe/multitenancy/components/themes/dynamicLoginMethodsSpinner/index.d.ts
diff --git a/lib/build/recipe/passwordless/components/themes/linkClickedScreen/index.d.ts b/lib/build/recipe/passwordless/components/themes/linkClickedScreen/index.d.ts
diff --git a/lib/build/recipe/passwordless/components/themes/signInUp/phoneNumberInput.d.ts b/lib/build/recipe/passwordless/components/themes/signInUp/phoneNumberInput.d.ts
diff --git a/lib/build/recipe/passwordless/recipe.d.ts b/lib/build/recipe/passwordless/recipe.d.ts
diff --git a/lib/build/recipe/thirdparty/components/library/providerButton.d.ts b/lib/build/recipe/thirdparty/components/library/providerButton.d.ts
diff --git a/lib/build/recipe/thirdparty/components/themes/signInAndUpCallback/index.d.ts b/lib/build/recipe/thirdparty/components/themes/signInAndUpCallback/index.d.ts
diff --git a/lib/build/recipe/thirdparty/prebuiltui.d.ts b/lib/build/recipe/thirdparty/prebuiltui.d.ts
diff --git a/lib/build/recipe/thirdpartyemailpassword/prebuiltui.d.ts b/lib/build/recipe/thirdpartyemailpassword/prebuiltui.d.ts
diff --git a/lib/build/recipe/thirdpartypasswordless/components/themes/signInUp/index.d.ts b/lib/build/recipe/thirdpartypasswordless/components/themes/signInUp/index.d.ts
diff --git a/lib/build/recipe/totp/recipe.d.ts b/lib/build/recipe/totp/recipe.d.ts
diff --git a/lib/build/version.d.ts b/lib/build/version.d.ts
diff --git a/lib/ts/recipe/emailpassword/components/library/formBase.tsx b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
@@ -66,7 +66,7 @@ function InputComponentWrapper(props: {
                 value,
             });
         },
-        [onInputFocus, field]
+        [onInputFocus, field.id]
     );
 
     const useCallbackOnInputBlur = useCallback<(value: string) => void>(
@@ -76,7 +76,7 @@ function InputComponentWrapper(props: {
                 value,
             });
         },
-        [onInputBlur, field]
+        [onInputBlur, field.id]
     );
 
     const useCallbackOnInputChange = useCallback(
@@ -86,7 +86,7 @@ function InputComponentWrapper(props: {
                 value,
             });
         },
-        [onInputChange, field]
+        [onInputChange, field.id]
     );
 
     return field.inputComponent !== undefined ? (

diff --git a/lib/ts/version.ts b/lib/ts/version.ts
@@ -12,4 +12,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export const package_version = "0.41.0";
+export const package_version = "0.41.1";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.41.0",
+    "version": "0.41.1",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {