Fix powmedia#537 - number field was swallowing enter key.

Remove the onKeyPress handler from the number field as HTML5 number doesn't allow non-numeric input. Add "TODO" test - it won't render field with a non-numeric value. Update example with number field. Fix bug with Form#handleEditorEvents tests running standalone - async in qunit.
glenpike · Dec 30, 2016 · 142240f · 142240f
1 parent 751a178
commit 142240f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 42 deletions.
diff --git a/examples/register-form-custom-template/index.html b/examples/register-form-custom-template/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>  
+<head>
 
 <title>Backbone.Form example</title>
 
@@ -23,7 +23,7 @@
     <h1>Register</h1>
 
     <h2>About you</h2>
-    <div data-fields="title,name,birthday"></div>
+    <div data-fields="title,name,birthday,salary"></div>
 
     <h2>Login details</h2>
     <div data-fields="email,password,confirmPassword,active"></div>
@@ -33,6 +33,6 @@ <h2>Languages you code in</h2>
     <input type="submit" class="btn btn-primary submit" />
   </form>
 </script>
-  
+
 </body>
 </html>
diff --git a/examples/register-form-custom-template/main.js b/examples/register-form-custom-template/main.js
@@ -14,6 +14,10 @@ $(function() {
       birthday: {
         type: 'Date'
       },
+      salary: {
+        type: 'Number',
+        validators: ['required']
+      },
       email: {
         validators: ['required', 'email']
       },

diff --git a/src/editors/number.js b/src/editors/number.js
@@ -1,15 +1,13 @@
 /**
  * NUMBER
- * 
+ *
  * Normal text input that only allows a number. Letters etc. are not entered.
  */
 Form.editors.Number = Form.editors.Text.extend({
 
   defaultValue: 0,
 
   events: _.extend({}, Form.editors.Text.prototype.events, {
-    'keypress': 'onKeyPress',
-    'change': 'onKeyPress',
     'input':    'determineChange'
   }),
 
@@ -27,39 +25,6 @@ Form.editors.Number = Form.editors.Text.extend({
     }
   },
 
-  /**
-   * Check value is numeric
-   */
-  onKeyPress: function(event) {
-    var self = this,
-        delayedDetermineChange = function() {
-          setTimeout(function() {
-            self.determineChange();
-          }, 0);
-        };
-
-    //Allow backspace
-    if (event.charCode === 0) {
-      delayedDetermineChange();
-      return;
-    }
-
-    //Get the whole new value so that we can prevent things like double decimals points etc.
-    var newVal = this.$el.val()
-    if( event.charCode != undefined ) {
-      newVal = newVal + String.fromCharCode(event.charCode);
-    }
-
-    var numeric = /^-?[0-9]*\.?[0-9]*$/.test(newVal);
-
-    if (numeric) {
-      delayedDetermineChange();
-    }
-    else {
-      event.preventDefault();
-    }
-  },
-
   getValue: function() {
     var value = this.$el.val();
 

diff --git a/test/editors/number.js b/test/editors/number.js
@@ -65,8 +65,12 @@
     same(editor.$el.attr('min'), '150');
   });
 
-  test("TODO: Restricts non-numeric characters", function() {
-    ok(1);
+  test("Restricts non-numeric characters", function() {
+    var editor = new Editor({
+      value: 'abc'
+    }).render();
+
+    same(editor.getValue(), null);
   });
 
   test("setValue() - updates the input value", function() {
@@ -80,6 +84,7 @@
     same(editor.getValue(), 2.4);
     equal($(editor.el).val(), 2.4);
   });
+
   test("setValue() - updates the model value", function() {
     var editor = new Editor({
       model: new Backbone.Model(),
@@ -129,7 +134,7 @@
 
     teardown: function() {
       this.sinon.restore();
-      
+
       this.editor.remove();
     }
   });

diff --git a/test/form.js b/test/form.js
@@ -627,9 +627,12 @@ test('triggers general form events', function() {
   form.on('blur', blurSpy);
   form.handleEditorEvent('blur', editor);
 
+  stop();
+
   setTimeout(function() {
     same(blurSpy.callCount, 1);
     same(blurSpy.args[0][0], form);
+    start();
   }, 0);
 });