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}