From 049893e22c13318ac9bb300ecfbb7c8b9a116982 Mon Sep 17 00:00:00 2001
From: Sayan Sivakumaran <sivakusayan@gmail.com>
Date: Sun, 25 Jun 2023 20:32:44 -0500
Subject: [PATCH] Checkbox Example (Mixed-State): Toggle on keyup to prevent
 continuous toggling (pull #2722)

Modified JavaScript for Checkbox Example (Mixed-State) so that the state of the checkbox does not change until key up. This change prevents continuous toggling if the user holds down the space key.

This is the same change that was made for Checkbox Example (Two State) in pull request #2518.

This commit fully resolves issue #2425.
---
 .../checkbox/examples/js/checkbox-mixed.js        | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/content/patterns/checkbox/examples/js/checkbox-mixed.js b/content/patterns/checkbox/examples/js/checkbox-mixed.js
index 278c92f1d1..bf1cf80af0 100644
--- a/content/patterns/checkbox/examples/js/checkbox-mixed.js
+++ b/content/patterns/checkbox/examples/js/checkbox-mixed.js
@@ -16,6 +16,7 @@ class CheckboxMixed {
     this.checkboxNodes = domNode.querySelectorAll('input[type="checkbox"]');
 
     this.mixedNode.addEventListener('keydown', this.onMixedKeydown.bind(this));
+    this.mixedNode.addEventListener('keyup', this.onMixedKeyup.bind(this));
     this.mixedNode.addEventListener('click', this.onMixedClick.bind(this));
     this.mixedNode.addEventListener('focus', this.onMixedFocus.bind(this));
     this.mixedNode.addEventListener('blur', this.onMixedBlur.bind(this));
@@ -116,23 +117,23 @@ class CheckboxMixed {
 
   /* EVENT HANDLERS */
 
+  // Prevent page scrolling on space down
   onMixedKeydown(event) {
-    var flag = false;
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
 
+  onMixedKeyup(event) {
     switch (event.key) {
       case ' ':
         this.toggleMixed();
-        flag = true;
+        event.stopPropagation();
         break;
 
       default:
         break;
     }
-
-    if (flag) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
   }
 
   onMixedClick() {