Merge pull request #557 from stramel/feature/selection

New: Add selectionStart and selectionEnd
PolymerElements · Sep 28, 2017 · bcb648f · bcb648f
2 parents 56089b9 + 5706d2b
commit bcb648f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 14 deletions.
diff --git a/paper-textarea.html b/paper-textarea.html
@@ -96,18 +96,18 @@
 
     behaviors: [
       Polymer.PaperInputBehavior,
-      Polymer.IronFormElementBehavior
+      Polymer.IronFormElementBehavior,
     ],
 
     properties: {
       _ariaLabelledBy: {
         observer: '_ariaLabelledByChanged',
-        type: String
+        type: String,
       },
 
       _ariaDescribedBy: {
         observer: '_ariaDescribedByChanged',
-        type: String
+        type: String,
       },
 
       /**
@@ -119,7 +119,7 @@
        */
       rows: {
         type: Number,
-        value: 1
+        value: 1,
       },
 
       /**
@@ -131,9 +131,23 @@
        * @default 0
        */
       maxRows: {
-       type: Number,
-       value: 0
-      }
+        type: Number,
+        value: 0,
+      },
+    },
+
+    get selectionStart() {
+      return this.$.input.textarea.selectionStart;
+    },
+    set selectionStart(start) {
+      this.$.input.textarea.selectionStart = start;
+    },
+
+    get selectionEnd() {
+      return this.$.input.textarea.selectionEnd;
+    },
+    set selectionEnd(end) {
+      this.$.input.textarea.selectionEnd = end;
     },
 
     _ariaLabelledByChanged: function(ariaLabelledBy) {

diff --git a/test/paper-textarea.html b/test/paper-textarea.html
@@ -66,7 +66,6 @@
   <script>
 
     suite('basic', function() {
-
       test('setting value sets the input value', function() {
         var input = fixture('basic');
         input.value = 'foobar';
@@ -108,7 +107,7 @@
           'placeholder': 'bar',
           'readonly': true,
           'required': true,
-          'maxlength': 3
+          'maxlength': 3,
         };
         for (var attr in attrs) {
           input[attr] = attrs[attr];
@@ -141,7 +140,32 @@
         var container = Polymer.dom(input.root).querySelector('paper-input-container');
         var inputContent = Polymer.dom(container.root).querySelector('.input-content');
         var ironTextarea = Polymer.dom(input.root).querySelector('iron-autogrow-textarea');
-        assert.equal(inputContent.clientHeight,ironTextarea.clientHeight, 'container and textarea are same height');
+        assert.equal(inputContent.clientHeight, ironTextarea.clientHeight, 'container and textarea are same height');
+      });
+    });
+
+    suite('selection', function() {
+      var input;
+
+      setup(function() {
+        input = fixture('basic');
+      });
+
+      test('initial selection should be 0', function() {
+        assert.equal(input.selectionStart, 0);
+        assert.equal(input.selectionEnd, 0);
+      });
+
+      test('selection should update', function() {
+        assert.equal(input.selectionStart, 0);
+        assert.equal(input.selectionEnd, 0);
+        input.value = 'The quick brown fox\n jumps over the lazy dog';
+        input.selectionStart = 16;
+        input.selectionEnd = 26;
+        assert.equal(input.selectionStart, 16);
+        assert.equal(input.selectionEnd, 26);
+        assert.equal(input.$.input.selectionStart, 16);
+        assert.equal(input.$.input.selectionEnd, 26);
       });
     });
 
@@ -158,14 +182,14 @@
       // its underlying native textarea, which will also fire a `blur`
       // event.
       test('focus events fired on host element', function() {
-        input.addEventListener('focus', function(event) {
+        input.addEventListener('focus', function() {
           assert(input.focused, 'input is focused');
         });
         MockInteractions.focus(input);
       });
 
       test('focus events fired on host element if nested element is focused', function() {
-        input.addEventListener('focus', function(event) {
+        input.addEventListener('focus', function() {
           assert(input.focused, 'input is focused');
         });
         MockInteractions.focus(input.inputElement.textarea);
@@ -244,9 +268,9 @@
           var ariaDescribedBy = input.inputElement.textarea.getAttribute('aria-describedby');
 
           assert.notEqual(ariaDescribedBy.indexOf(Polymer.dom(input.root).querySelector('paper-input-error').id, -1,
-              'aria-describedby points to the error message'));
+            'aria-describedby points to the error message'));
           assert.notEqual(ariaDescribedBy.indexOf(Polymer.dom(input.root).querySelector('paper-input-char-counter').id, -1,
-              'aria-describedby points to the character counter'));
+            'aria-describedby points to the character counter'));
           done();
         }, 1);
       });