Event handler props on input component should be non-optional (#768)

* Event handler props on input component should be non-optional * version and changelog change --------- Co-authored-by: rishabhpoddar <rishabh.poddar@gmail.com>
supertokens · Nov 26, 2023 · 4ac34fd · 4ac34fd
1 parent 1baf355
commit 4ac34fd
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
-## [0.35.7] - 2023-11-16
+## [0.35.8] - 2023-11-26
+
+-   Fixes `inputComponent` props to make them non optional. This is in the context of customizing the sign up form to add custom react components.
+
+## [0.35.7] - 2023-11-24
 
 ### Added
 

diff --git a/lib/build/recipe/emailpassword/components/library/input.d.ts b/lib/build/recipe/emailpassword/components/library/input.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/input.tsx b/lib/ts/recipe/emailpassword/components/library/input.tsx
@@ -31,9 +31,9 @@ export type InputProps = {
     hasError: boolean;
     placeholder: string;
     value: string;
-    onInputBlur?: (value: string) => void;
-    onInputFocus?: (value: string) => void;
-    onChange?: (value: string) => void;
+    onInputBlur: (value: string) => void;
+    onInputFocus: (value: string) => void;
+    onChange: (value: string) => void;
 };
 
 const Input: React.FC<InputProps> = ({

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.35.7";
+export const package_version = "0.35.8";
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.35.7",
+    "version": "0.35.8",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {

diff --git a/test/with-typescript/src/App.tsx b/test/with-typescript/src/App.tsx
@@ -400,9 +400,7 @@ function getEmailPasswordConfigs() {
                                     value={inputProps.value}
                                     checked={inputProps.value === "true"}
                                     onChange={(e) => {
-                                        if (inputProps.onChange) {
-                                            inputProps.onChange(e.target.checked.toString());
-                                        }
+                                        inputProps.onChange(e.target.checked.toString());
                                     }}></input>
                                 <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
                             </div>
@@ -421,21 +419,15 @@ function getEmailPasswordConfigs() {
                         inputComponent: (inputProps) => (
                             <select
                                 onBlur={(e) => {
-                                    if (inputProps.onInputBlur) {
-                                        inputProps.onInputBlur(e.target.value);
-                                    }
+                                    inputProps.onInputBlur(e.target.value);
                                 }}
                                 onFocus={(e) => {
-                                    if (inputProps.onInputFocus) {
-                                        inputProps.onInputFocus(e.target.value);
-                                    }
+                                    inputProps.onInputFocus(e.target.value);
                                 }}
                                 value={inputProps.value}
                                 name={inputProps.name}
                                 onChange={(e) => {
-                                    if (inputProps.onChange) {
-                                        inputProps.onChange(e.target.value);
-                                    }
+                                    inputProps.onChange(e.target.value);
                                 }}>
                                 <option value="" disabled hidden>
                                     Select an option