Merge pull request #16 from PolymerElements/fix-caret

preserve caret position when editing
PolymerElements · Jun 10, 2015 · d3a3104 · d3a3104
2 parents ab8bdf3 + 5c42185
commit d3a3104
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/gold-phone-input.html b/gold-phone-input.html
@@ -89,7 +89,7 @@
           required$="[[required]]"
           bind-value="{{value}}"
           name$="[[name]]"
-          allowed-pattern="[0-9]"
+          allowed-pattern="[0-9\-]"
           autocomplete="tel"
           type="tel"
           prevent-invalid-input
@@ -192,13 +192,14 @@
 
         formattedValue += value[i];
       }
-
-      this.value = formattedValue.trim();
+      this.updateValueAndPreserveCaret(formattedValue.trim());
 
       // If the character right before the selection is a newly inserted
       // dash, we need to advance the selection to maintain the caret position.
-      if (!previousCharADash && this.value.charAt(start - 1) == '-')
-        this.$.input.selectionStart++;
+      if (!previousCharADash && this.value.charAt(start - 1) == '-') {
+        this.$.input.selectionStart = start + 1;
+        this.$.input.selectionEnd = start + 1;
+      }
     }
 
   })

diff --git a/test/basic.html b/test/basic.html
@@ -80,17 +80,17 @@
         assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
       });
 
-      // TODO: re-enable when PolymerElements/iron-input/issues/24 is fixed.
-      // test('caret position is preserved', function() {
-      //   var input = fixture('required');
-      //   var ironInput = input.querySelector('input[is="iron-input"]');
-      //   input.value='111-111-1';
-      //   ironInput.selectionStart = (2,2);
-      //   input.value='112-111-11';
-      //
-      //   assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
-      //   assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
-      // });
+      test('caret position is preserved', function() {
+        var input = fixture('required');
+        var ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]');
+        input.value='111-111-1';
+        ironInput.selectionStart = 2;
+        ironInput.selectionEnd = 2;
+        input._computeValue('112-111-11');
+
+        assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
+        assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
+      });
 
       suite('a11y', function() {