ampersand-dom-bindings - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

ampersand-dom-bindings.js

@@ -93,3 +93,4 @@ var Store = require('key-tree-store');
                 if (!value && value !== 0) value = '';
-                match.value = value;
+                // only apply bindings if element is not currently focused
+                if (document.activeElement !== match) match.value = value;
             });
@@ -96,0 +97,0 @@ previousValue = value;

package.json

 {
   "name": "ampersand-dom-bindings",
   "description": "Takes binding declarations and returns key-tree-store of functions that can be used to apply those bindings.",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "'Henrik Joreteg' <[e-mail]>",
@@ -6,0 +6,0 @@ "bugs": {

README.md

@@ -59,2 +59,4 @@ # ampersand-dom-bindings
 sets the value of the element to match value of the property. works well for `input`, `select`, and `textarea` elements. treats `undefined`, `null`, and `NaN` as `''` (empty string).
+
+**note**: The binding will only be applied if the element is not currently in focus. This is done by checking to see if the element is the `document.activeElement` first. The reason it works this way is because if you've set up two-way data bindings you get a circular event: the input changes, which sets the bound model property, which in turn updates the value of the input. This might sound OK but results in the cursor always jumping to the end of the input/textarea. So if you're editing the middle of a bound text field, the cursor keeps jumping to the end. We avoid this by making sure it's not already in focus thus avoiding the bad loop.
     
@@ -61,0 +63,0 @@ ```js

test/index.js

@@ -136,2 +136,27 @@ var test = require('tape');
 
+test('value bindings', function (t) {
+    var input = getEl('<input class="thing" type="text">');
+    var select = getEl('<select class="thing"><option value=""></option><option value="hello"></option><option value="string"></option></select>');
+    var textarea = getEl('<textarea class="thing"></textarea>');
+
+    [input, select, textarea].forEach(function (el) {
+        document.body.appendChild(el);
+        el.firstChild.focus();
+
+        var bindings = domBindings({
+            'model': {
+                type: 'value',
+                selector: '.thing'
+            }
+        });
+
+        t.equal(el.firstChild.value, '');
+
+        bindings.run('model', null, el, 'hello');
+        t.equal(el.firstChild.value, '');
+    });
+
+    t.end();
+});
+
 /*
@@ -145,3 +170,3 @@ ### booleanClass
     type: 'booleanClass',
-    selector: '#something', // or role
+    selector: '#something', // or hook
     // to specify name of class to toggle (if different than key name)
@@ -148,0 +173,0 @@ // you could either specify a name

No alert changes

Improved metrics

Total package byte prevSize

28811

increased by9.9%

Number of package files

6

increased by20%

Lines of code

488

increased by4.27%

Number of lines in readme file

261

increased by0.77%

No dependency changes