fix: toggle password

ory · Oct 13, 2023 · c892eca · c892eca
1 parent caf283b
commit c892eca
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/assets/passwordInput.js b/src/assets/passwordInput.js
@@ -17,10 +17,12 @@ document.getElementsByName("password").forEach((p) => {
       visibilityToggle.dataset.checked =
         visibilityToggle.dataset.checked === "true" ? "false" : "true"
     })
-    visibilityToggle.addEventListener("keydown", function () {
-      togglePassword(p)
-      visibilityToggle.dataset.checked =
-        visibilityToggle.dataset.checked === "true" ? "false" : "true"
+    visibilityToggle.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        togglePassword(p)
+        visibilityToggle.dataset.checked =
+          visibilityToggle.dataset.checked === "true" ? "false" : "true"
+      }
     })
   }
 })
diff --git a/src/react-components/input-field.tsx b/src/react-components/input-field.tsx
@@ -67,8 +67,14 @@ export const InputField = ({
             onClick={(e) => {
               setVisibility(!visibility)
               e.currentTarget.dataset.checked =
+                e.currentTarget.dataset.checked === "true" ? "false" : "true"
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setVisibility(!visibility)
                 e.currentTarget.dataset.checked =
                   e.currentTarget.dataset.checked === "true" ? "false" : "true"
+              }
             }}
             data-checked="false"
             className={inputFieldVisibilityToggleLabelStyle}