diff --git a/addon/components/paper-autocomplete-trigger.js b/addon/components/paper-autocomplete-trigger.js index ed3dedec0..fd7ae344b 100644 --- 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 index 10111f298..3737ef328 100644 --- 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 index a6d932a43..c8996081f 100644 --- 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}}