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.

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() {