Fixed the bug in detecting AltGr #4

Author: Mostafa-Abbasi

script.js

@@ -38,30 +38,38 @@ const handleKeyPress = function (e) {
   console.log(e);
 
   e.preventDefault();
+
   // Edge case mentioned in https://github.com/Mostafa-Abbasi/KeyboardTester/issues/4
   // Detect AltGr key press (Alt + Control pressed simultaneously)
-  const isAltGr = e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey;
+  const isAltGr = e.key === 'AltGraph';
 
-  let keyElement;
+  // Ignore the left Control key if AltGr is pressed
   if (isAltGr) {
-    keyElement = document.querySelector('.' + 'AltRight');
-  } else {
-    keyElement = document.querySelector('.' + e.code.toLowerCase());
+    document
+      .querySelector('.' + 'controlleft')
+      .classList.remove('key-pressing-simulation');
+
+    document
+      .querySelector('.' + 'controlleft')
+      .classList.remove('key--pressed');
   }
 
+  const keyElement = document.querySelector('.' + e.code.toLowerCase());
+
   if (e.type === 'keydown') {
     keyElement.classList.add('key-pressing-simulation');
   } else if (e.type === 'keyup') {
     keyElement.classList.remove('key-pressing-simulation');
   }
 
-  if (!keyElement.classList.contains('key--pressed'))
+  if (!keyElement.classList.contains('key--pressed')) {
     keyElement.classList.add('key--pressed');
+  }
 
-  // 'Meta' or 'OS' is a bit tricky and only in this way
-  // we can reliably remove the class from the element
-  if (e.key === 'Meta' || e.key === 'OS')
+  // Handle special Meta/OS key case
+  if (e.key === 'Meta' || e.key === 'OS') {
     keyElement.classList.remove('key-pressing-simulation');
+  }
 };
 
 document.addEventListener('keydown', handleKeyPress);