From c5c07c1285acd1d58f45b47cefc9a68495536dff Mon Sep 17 00:00:00 2001
From: Sanidhya Singh <sanidhyas3s@gmail.com>
Date: Thu, 1 Jun 2023 16:48:44 +0530
Subject: [PATCH] Fix persistent CapsLock message being displayed (#4339)
 sandihyas3s

* Fix persistent CapsLock message

* using vanilla js to increase performance a tiny bit since this will happen on every keyup and keydown

---------

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/src/ts/test/caps-warning.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/test/caps-warning.ts b/frontend/src/ts/test/caps-warning.ts
index dd1ddae43..329a68e08 100644
--- a/frontend/src/ts/test/caps-warning.ts
+++ b/frontend/src/ts/test/caps-warning.ts
@@ -1,24 +1,26 @@
 import Config from "../config";
 
+const el = document.querySelector("#capsWarning") as HTMLElement;
+
 export let capsState = false;
 
 let visible = false;
 
 function show(): void {
   if (!visible) {
-    $("#capsWarning").removeClass("hidden");
+    el?.classList.remove("hidden");
     visible = true;
   }
 }
 
 function hide(): void {
   if (visible) {
-    $("#capsWarning").addClass("hidden");
+    el?.classList.add("hidden");
     visible = false;
   }
 }
 
-$("#wordsInput").on("keydown", function (event) {
+$(document).on("keydown", function (event) {
   if (
     event?.originalEvent?.getModifierState &&
     event?.originalEvent?.getModifierState("CapsLock")
@@ -37,7 +39,7 @@ $("#wordsInput").on("keydown", function (event) {
   } catch {}
 });
 
-$("#wordsInput").on("keyup", function (event) {
+$(document).on("keyup", function (event) {
   if (
     event?.originalEvent?.getModifierState &&
     event?.originalEvent?.getModifierState("CapsLock")