From d1cfe0059da31c57075b884bd94817251be66c7a Mon Sep 17 00:00:00 2001
From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:00:53 +0200
Subject: [PATCH] fix: toggle password (#161)

---
 src/assets/passwordInput.js          | 10 ++++++----
 src/react-components/input-field.tsx |  6 ++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/assets/passwordInput.js b/src/assets/passwordInput.js
index b2de5187b..8876870cc 100644
--- 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
index 3f40a29ff..225686f8f 100644
--- 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}