Caps Lock warning stuck on firefox until another key is pressed

ben-111 commented 1 week ago

Did you clear cache before opening an issue?

[X] I have cleared my cache

Is there an existing issue for this?

[X] I have searched the existing issues

Does the issue happen when logged in?

Yes

Does the issue happen when logged out?

Yes

Does the issue happen in incognito mode when logged in?

Yes

Does the issue happen in incognito mode when logged out?

Yes

Account name

benl111

Account config

No response

Current Behavior

I am using Firefox on Ubuntu. When the text is in focus and I press the Caps Lock key, a yellow warning appears that says "Caps Lock". When I press the Caps Lock key again, the Caps Lock is released but the warning persists until a different key is pressed. Note that when the text is not in focus, the "Caps Lock" warning does go away when the Caps Lock is released.

Expected Behavior

The "Caps Lock" warning shouldn't be showing when the Caps Lock is released. ~The correct behavior can be seen on Chromium browsers.~ My bad, it's the same on chromium on Linux, works correctly on windows though.

Steps To Reproduce

Open the MonkeyType website on firefox.
Bring the text into focus.
Press on the Caps Lock key to bring the "Caps Lock" warning up.
Press the Caps Lock key again to release the Caps Lock, and observe the "Caps Lock" warning stay in place.

Environment

OS: Ubuntu 24.04
Browser: Firefox
Browser Version: 129.0.2

Anything else?

No response

avick-saha commented 1 week ago

I'm using Ubuntu 24.04 as my OS and Firefox for browsing. I tried to reproduce the issue, but everything is working fine as expected. Could you send a screen recording for a better understanding of the issue?

Miodec commented 1 week ago

As far as we could tell its only a Linux Chrome issue.

ben-111 commented 1 week ago

Sure: Screencast from 2024-09-06 18-38-21.webm

Also just checked on chromium, and the bug is the same there - I remembered that it worked on chromium in the past, so my bad.

ben-111 commented 1 week ago

Also here it is working correctly when the text is out of focus: Screencast from 2024-09-06 18-44-39.webm

ben-111 commented 1 week ago

I added some print statements in caps-warning.ts to try and understand the problem better:

function update(event: JQuery.KeyDownEvent | JQuery.KeyUpEvent): void {
  console.debug(event?.originalEvent?.getModifierState?.("CapsLock"));
  capsState =
    event?.originalEvent?.getModifierState?.("CapsLock") ?? !capsState;

  console.debug(`capsState=${capsState}`);

  try {
    if (Config.capsLockWarning && capsState) {
      show();
    } else {
      hide();
    }
  } catch {}
}

$(document).on("keyup", update);

$(document).on("keydown", (event) => {
  if (isMacOs) update(event);
});

After pressing the CapsLock key twice this is the output:

DEBG Key not tracked CapsLock [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG capsState=true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG Key not tracked CapsLock [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG capsState=true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG Key not tracked CapsLock [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG capsState=true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)

So it seems to be an issue with the JQuery event maybe?

When the text is not in focus this is the output:

DEBG true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG capsState=true [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG false [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)
DEBG capsState=false [logger.ts:54:2](http://localhost:3000/ts/utils/logger.ts)

ben-111 commented 1 week ago

I managed to boil it down to a simple case:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CapsLock state bug</title>
    <script>
      document.addEventListener("keyup", function (event) {
        console.debug("Key pressed:", event.key);
        console.debug("CapsLock state:", event.getModifierState("CapsLock"));
      });
    </script>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

On firefox, when the input is out of focus, it works as expected, and when the input is in focus, the bug occurs. On chromium it's even worse - even if the input is out of focus the bug occurs, and that's the same behavior in monkeytype on chromium as well. caps-lock-bug-on-chromium.webm caps-lock-bug-on-firefox.webm

So it doesn't appear to be an issue with monkeytype at all, and since @avick-saha says they're not experiencing any issues, I am not sure who to report the problem to.

avick-saha commented 1 week ago

I'm not sure what's causing the issue exactly, as I can't reproduce it. However, if it's related to jQuery (as you suggested), please try the code snippet below.


function update(event) {
  console.debug(event?.getModifierState?.("CapsLock"));

  // Assuming `capsState` is a global or higher-scoped variable
  capsState = event?.getModifierState?.("CapsLock") ?? !capsState;

  console.debug(`capsState=${capsState}`);

  try {
    if (Config.capsLockWarning && capsState) {
      show();
    } else {
      hide();
    }
  } catch (e) {
    // Handle error silently
  }
}

// Attach event listeners using native JavaScript
document.addEventListener("keyup", update);

document.addEventListener("keydown", (event) => {
  if (isMacOs) update(event);
});

ben-111 commented 1 week ago

No it's not a problem with JQuery - the simple case I posted is vanilla HTML+Javascript. It seems to be a problem for browsers on my Linux machine. What's odd is that you have a very similar setup to mine and you are not getting the bug. I even made an Ubuntu virtual machine freshly installed and got the same bug, so I wonder what the difference is.

avick-saha commented 1 week ago

I also can't understand how it's working on one machine and not on another. You've mentioned that it's not working on the freshly installed Ubuntu virtual machine...

monkeytypegame / monkeytype