better way to support labels and placeholders

miguelcobain · Sep 6, 2018 · 6bddb15 · 6bddb15
1 parent 4dc91f4
commit 6bddb15
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js
@@ -29,7 +29,6 @@ export default Component.extend(FocusableMixin, ColorMixin, ChildMixin, Validati
   tagName: 'md-input-container',
   classNames: ['md-default-theme'],
   classNameBindings: [
-    'hasPlaceholder:md-input-has-placeholder',
     'hasValue:md-input-has-value',
     'isInvalidAndTouched:md-input-invalid',
     'hasLeftIcon:md-icon-left',
@@ -54,8 +53,9 @@ export default Component.extend(FocusableMixin, ColorMixin, ChildMixin, Validati
     return !isEmpty(value) || isNativeInvalid;
   }),
 
-  hasPlaceholder: computed('placeholder', 'label', function() {
-    return !isEmpty(this.get('placeholder')) && !isEmpty(this.get('label'));
+  shouldAddPlaceholder: computed('label', 'focused', function() {
+    // if has label, only add placeholder when focused
+    return isEmpty(this.get('label')) || this.get('focused');
   }),
 
   inputElementId: computed('elementId', function() {

diff --git a/addon/templates/components/paper-input.hbs b/addon/templates/components/paper-input.hbs
@@ -10,7 +10,7 @@
   <textarea
     class="md-input {{if isInvalid "ng-invalid"}} {{if isTouched "ng-dirty"}}"
     id={{inputElementId}}
-    placeholder={{placeholder}}
+    placeholder={{if shouldAddPlaceholder placeholder}}
     disabled={{disabled}}
     autofocus={{autofocus}}
     onfocus={{onFocus}}
@@ -37,7 +37,7 @@
   <input
     class="md-input {{if isInvalid "ng-invalid"}}  {{if isTouched "ng-dirty"}}"
     id={{inputElementId}}
-    placeholder={{placeholder}}
+    placeholder={{if shouldAddPlaceholder placeholder}}
     type={{type}}
     disabled={{disabled}}
     autofocus={{autofocus}}

diff --git a/tests/dummy/app/templates/demo/input.hbs b/tests/dummy/app/templates/demo/input.hbs
@@ -3,7 +3,7 @@
 {{#doc-content}}
   {{! BEGIN-SNIPPET input.basic-usage}}
   <div class="layout layout-sm-column">
-    {{paper-input class="flex-30" label="Name" placeholder="Name" value=name onChange=(action (mut name))}}
+    {{paper-input class="flex-30" label="Name" placeholder="Enter name" value=name onChange=(action (mut name))}}
     {{paper-input class="flex-30" label="E-mail" type="email" value=email onChange=(action (mut email))}}
     {{paper-input class="flex-40" label="Password" type="password" value=password onChange=(action (mut password))}}
   </div>