feat(directive): add placeholder support

Closes #27
spirosikmd · Oct 21, 2017 · 2f6b72d · 2f6b72d
1 parent 4472f94
commit 2f6b72d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/docs/app.html b/docs/app.html
@@ -1,7 +1,7 @@
 <div class="aligner">
     <div class="aligner-item aligner-item--fixed">
         <label>
-            <input type="text" class="elastic-input" value="..42.." elastic-input>
+            <input type="text" class="elastic-input" value="..42.." placeholder="enter value" elastic-input>
         </label>
     </div>
 </div>
diff --git a/docs/bundle.js b/docs/bundle.js
@@ -55494,9 +55494,10 @@ var ElasticInputDirective = (function () {
         }
     };
     ElasticInputDirective.prototype.update = function () {
-        this.mirror.innerText = this.element.nativeElement.value;
+        var domEl = this.element.nativeElement;
+        this.mirror.innerText = domEl.value || domEl.placeholder;
         var delta = 1;
-        this.element.nativeElement.style.width = this.mirror.offsetWidth + delta + "px";
+        domEl.style.width = this.mirror.offsetWidth + delta + "px";
     };
     return ElasticInputDirective;
 }());

diff --git a/src/elastic-input.directive.spec.ts b/src/elastic-input.directive.spec.ts
@@ -49,5 +49,19 @@ describe('elastic-input', function () {
       expect(this.directive.mirror.innerText).toBe('foo');
       expect(this.elementRef.nativeElement.style.width).toBe('101px');
     });
+
+    it('sets native element value to mirror innerText when placeholder', function () {
+      this.elementRef.nativeElement.style = {
+        width: '10px'
+      };
+      this.elementRef.nativeElement.placeholder = 'placeholder';
+      this.directive.mirror = {
+        innerText: '',
+        offsetWidth: 100
+      };
+      this.directive.update();
+      expect(this.directive.mirror.innerText).toBe('placeholder');
+      expect(this.elementRef.nativeElement.style.width).toBe('101px');
+    });
   });
 });
diff --git a/src/elastic-input.directive.ts b/src/elastic-input.directive.ts
@@ -66,8 +66,9 @@ export class ElasticInputDirective implements OnInit {
   }
 
   update () {
-    this.mirror.innerText = this.element.nativeElement.value;
+    let domEl = this.element.nativeElement;
+    this.mirror.innerText = domEl.value || domEl.placeholder;
     let delta = 1;
-    this.element.nativeElement.style.width = `${this.mirror.offsetWidth + delta}px`;
+    domEl.style.width = `${this.mirror.offsetWidth + delta}px`;
   }
 }