show md-show-clear-button only when button is visible

miguelcobain · Sep 28, 2017 · 41765e6 · 41765e6
1 parent 3a5f301
commit 41765e6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/addon/components/paper-autocomplete-trigger.js b/addon/components/paper-autocomplete-trigger.js
@@ -13,12 +13,20 @@ const { Component, isPresent, isBlank, run, get, computed } = Ember;
 export default Component.extend({
   layout,
   tagName: 'md-autocomplete-wrap',
-  classNames: ['md-show-clear-button'],
-  classNameBindings: ['noLabel:md-whiteframe-z1', 'select.isOpen:md-menu-showing'],
+  classNameBindings: ['noLabel:md-whiteframe-z1', 'select.isOpen:md-menu-showing', 'showingClearButton:md-show-clear-button'],
 
   noLabel: computed.not('extra.label'),
   _innerText: computed.oneWay('searchText'),
 
+  showingClearButton: computed('allowClear', 'disabled', 'resetButtonDestroyed', function() {
+    // make room for clear button:
+    // - if we're enabled
+    // - or if we're disabled but the button still wasn't destroyed
+    return this.get('allowClear') && (
+      !this.get('disabled') || (this.get('disabled') && !this.get('resetButtonDestroyed'))
+    );
+  }),
+
   text: computed('selected', 'searchText', '_innerText', {
     get() {
       let {
@@ -56,11 +64,13 @@ export default Component.extend({
     let oldSelect = this.get('_oldSelect');
     let oldLastSearchedText = this.get('_lastSearchedText');
     let oldLoading = this.get('_loading');
+    let oldDisabled = this.get('_lastDisabled');
 
     let select = this.get('select');
     let loading = this.get('loading');
     let searchText = this.get('searchText');
     let lastSearchedText = this.get('lastSearchedText');
+    let disabled = this.get('disabled');
 
     if (oldSelect && oldSelect.isOpen && !select.isOpen && !loading && searchText) {
       this.set('text', this.getSelectedAsText());
@@ -78,10 +88,15 @@ export default Component.extend({
       run.schedule('actions', null, select.actions.open);
     }
 
+    if (oldDisabled && !disabled) {
+      this.set('resetButtonDestroyed', false);
+    }
+
     this.setProperties({
       _oldSelect: select,
       _lastSearchedText: lastSearchedText,
-      _loading: loading
+      _loading: loading,
+      _lastDisabled: disabled
     });
   },
 
@@ -119,6 +134,12 @@ export default Component.extend({
       }
       this.get('onInput')(e.target ? e : { target: { value: e } });
       this.set('text', e.target ? e.target.value : e);
+    },
+
+    resetButtonDestroyed() {
+      if (this.get('disabled')) {
+        this.set('resetButtonDestroyed', true);
+      }
     }
   },
   // Methods

diff --git a/addon/components/paper-reset-button.js b/addon/components/paper-reset-button.js
@@ -13,6 +13,10 @@ export default Component.extend(TransitionMixin, {
       return;
     }
     onReset(e);
-  }
+  },
 
+  didTransitionOut() {
+    this._super(...arguments);
+    this.sendAction('onDidTransitionOut');
+  }
 });
diff --git a/addon/templates/components/paper-autocomplete-trigger.hbs b/addon/templates/components/paper-autocomplete-trigger.hbs
@@ -44,7 +44,7 @@
   {{paper-progress-linear classNameBindings="extra.label:md-inline"}}
 {{/if}}
 {{#if (and (or selected text) allowClear (not select.disabled))}}
-  {{#paper-reset-button onReset=(action "clear") tabindex="-1"}}
+  {{#paper-reset-button onReset=(action "clear") onDidTransitionOut=(action "resetButtonDestroyed") tabindex="-1"}}
     {{paper-icon "close"}}
   {{/paper-reset-button}}
 {{/if}}