#2676 Checkbox now correctly prevent default event on keyup not keydown

Semantic-Org · Jul 20, 2015 · 8f6bc3d · 8f6bc3d
1 parent e07369a
commit 8f6bc3d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -4,6 +4,7 @@
 **[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.0.5+is%3Aclosed)**
 
 - **API** - Data replaced in urls, `urlData`, will now be url encoded by default. Additionally checks were added to avoid double encoding already encoded values. #2394
+- **Checkbox** - Fix issue with `onChange` not firing when space key is used. Checkbox keyboard shortcuts now occur on `keydown` but cancel events correctly on `keyup` #2676
 - **Dropdown** - Fixed regression causing `multiple search dropdown` using [`search` inside menu](http://www.semantic-ui.com/modules/dropdown.html#search-in-menu) to break, caused by JS error using "split"
 - **Message** - Fixed issues where icon would overlap in `icon message` when at mobile resolutions due to `flex-collapse` value being incorrect #2665
 

diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js
@@ -44,6 +44,8 @@ $.fn.checkbox = function(parameters) {
         $label          = $(this).children(selector.label),
         $input          = $(this).children(selector.input),
 
+        shortcutPressed = false,
+
         instance        = $module.data(moduleNamespace),
 
         observer,
@@ -192,11 +194,19 @@ $.fn.checkbox = function(parameters) {
             if(key == keyCode.escape) {
               module.verbose('Escape key pressed blurring field');
               $input.blur();
-              event.preventDefault();
+              shortcutPressed = true;
             }
-            if(!event.ctrlKey && (key == keyCode.enter)) {
-              module.verbose('Enter key pressed, toggling checkbox');
+            else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {
+              module.verbose('Enter/space key pressed, toggling checkbox');
               module.toggle();
+              shortcutPressed = true;
+            }
+            else {
+              shortcutPressed = false;
+            }
+          },
+          keyup: function(event) {
+            if(shortcutPressed) {
               event.preventDefault();
             }
           }
@@ -455,6 +465,7 @@ $.fn.checkbox = function(parameters) {
             $module
               .on('click'   + eventNamespace, module.event.click)
               .on('keydown' + eventNamespace, selector.input, module.event.keydown)
+              .on('keyup'   + eventNamespace, selector.input, module.event.keyup)
             ;
           }
         },