diff --git a/addon/components/paper-autocomplete-trigger.js b/addon/components/paper-autocomplete-trigger.js index 0bdbfc770..47177305d 100644 --- a/addon/components/paper-autocomplete-trigger.js +++ b/addon/components/paper-autocomplete-trigger.js @@ -1,12 +1,9 @@ /** * @module ember-paper */ -import { not, oneWay } from '@ember/object/computed'; - import Component from '@ember/component'; -import { isBlank, isPresent } from '@ember/utils'; -import { run } from '@ember/runloop'; -import { computed, get } from '@ember/object'; +import { not } from '@ember/object/computed'; +import { computed } from '@ember/object'; import layout from '../templates/components/paper-autocomplete-trigger'; /** @@ -19,8 +16,6 @@ export default Component.extend({ classNameBindings: ['noLabel:md-whiteframe-z1', 'select.isOpen:md-menu-showing', 'showingClearButton:md-show-clear-button'], noLabel: not('extra.label'), - _innerText: oneWay('searchText'), - showingClearButton: computed('allowClear', 'disabled', 'resetButtonDestroyed', function() { // make room for clear button: // - if we're enabled @@ -30,76 +25,25 @@ export default Component.extend({ ); }), - text: computed('select', 'searchText', '_innerText', { - get() { - let { - select, - searchText, - _innerText - } = this.getProperties('select', 'searchText', '_innerText'); - - if (select && select.selected) { - return this.getSelectedAsText(); - } - return searchText ? searchText : _innerText; - }, - set(_, v) { - let { select, searchText } = this.getProperties('select', 'searchText'); - this.set('_innerText', v); - - // searchText should always win - if (!(select && select.selected) && isPresent(searchText)) { - return searchText; - } - - return v; + text: computed('select.{searchText,selected}', function() { + let selected = this.get('select.selected'); + if (selected) { + return this.getSelectedAsText(); } - }), + return this.get('select.searchText'); + }).readOnly(), // Lifecycle hooks didUpdateAttrs() { this._super(...arguments); - /* - * We need to update the input field with value of the selected option whenever we're closing - * the select box. But we also close the select box when we're loading search results and when - * we remove input text -- so protect against this - */ - 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 prevDisabled = this.get('_prevDisabled'); let disabled = this.get('disabled'); - - if (oldSelect && oldSelect.isOpen && !select.isOpen && !loading && searchText) { - this.set('text', this.getSelectedAsText()); - } - - if (lastSearchedText !== oldLastSearchedText) { - if (isBlank(lastSearchedText)) { - run.schedule('actions', null, select.actions.close, null, true); - } else { - run.schedule('actions', null, select.actions.open); - } - } else if (!isBlank(lastSearchedText) && get(this, 'options.length') === 0 && this.get('loading')) { - run.schedule('actions', null, select.actions.close, null, true); - } else if (oldLoading && !loading && this.get('options.length') > 0) { - run.schedule('actions', null, select.actions.open); - } - - if (oldDisabled && !disabled) { + if (prevDisabled && !disabled) { this.set('resetButtonDestroyed', false); } this.setProperties({ - _oldSelect: select, - _lastSearchedText: lastSearchedText, - _loading: loading, - _lastDisabled: disabled + _prevDisabled: disabled }); }, @@ -111,7 +55,6 @@ export default Component.extend({ clear(e) { e.stopPropagation(); - this.set('text', ''); if (this.get('onClear')) { this.get('onClear')(); } else { @@ -136,7 +79,6 @@ export default Component.extend({ this.get('select').actions.select(null); } this.get('onInput')(e.target ? e : { target: { value: e } }); - this.set('text', e.target ? e.target.value : e); }, resetButtonDestroyed() { diff --git a/addon/components/paper-autocomplete.js b/addon/components/paper-autocomplete.js index 03fdf4319..a92e3f2b7 100644 --- a/addon/components/paper-autocomplete.js +++ b/addon/components/paper-autocomplete.js @@ -56,6 +56,12 @@ export default PowerSelect.extend(ValidationMixin, ChildMixin, { return classes.join(' '); }), + _onInput(value) { + let handler = this.get('onSearchTextChange') || ((v) => this.set('searchText', v)); + handler(...arguments); + return value; + }, + init() { this._initComponent(); this._super(...arguments); @@ -74,8 +80,8 @@ export default PowerSelect.extend(ValidationMixin, ChildMixin, { assert('{{paper-autocomplete}} requires at least one of the `onSelectionChange` or `onSearchTextChange` functions to be provided.', hasTextChange || hasSelectionChange); let aliasOnChangeDepKey = hasSelectionChange ? 'onSelectionChange' : '_onChangeNop'; - defineProperty(this, 'oninput', alias('onSearchTextChange')); defineProperty(this, 'onchange', alias(aliasOnChangeDepKey)); + this.oninput = this._onInput.bind(this); }, // Choose highlighted item on key tab @@ -88,6 +94,17 @@ export default PowerSelect.extend(ValidationMixin, ChildMixin, { this._super(...arguments); }, + didReceiveAttrs() { + let searchText = this.get('searchText'); + if (searchText !== this.get('publicAPI.searchText')) { + let publicAPI = this.get('publicAPI'); + if (publicAPI && publicAPI.actions) { + publicAPI.actions.search(searchText); + } + } + this._super(...arguments); + }, + actions: { onTriggerMouseDown() { diff --git a/addon/components/paper-chips.js b/addon/components/paper-chips.js index a21c4fdbe..a8cd48703 100644 --- a/addon/components/paper-chips.js +++ b/addon/components/paper-chips.js @@ -1,7 +1,6 @@ import Component from '@ember/component'; import { isPresent, isEmpty } from '@ember/utils'; import { observer, computed } from '@ember/object'; -import { run } from '@ember/runloop'; import layout from '../templates/components/paper-chips'; export default Component.extend({ @@ -17,7 +16,6 @@ export default Component.extend({ return true; }), - resetTimer: null, lastItemChosen: false, handleFocusChange: observer('focusedElement', 'activeChip', function() { @@ -55,11 +53,7 @@ export default Component.extend({ this.sendAction('addItem', item); this.set('newChipValue', ''); - - if (isPresent(this.get('autocomplete'))) { - // We have an autocomplete - reset it once it's closed itself. - this.queueReset(); - } + this.set('searchText', ''); } }, @@ -68,7 +62,6 @@ export default Component.extend({ let current = this.get('activeChip'); if (current === -1 || current >= this.get('content').length) { - this.queueReset(); this.set('activeChip', -1); } }, @@ -142,22 +135,21 @@ export default Component.extend({ if (item) { // Trigger onChange for the new item. this.sendAction('addItem', item); - - this.queueReset(); + this.set('searchText', ''); // Track selection of last item if no match required. if (this.get('options').length === 1 && !this.get('requireMatch')) { this.set('lastItemChosen', true); this.set('autocomplete', null); } - - return true; } }, - searchTextChange(searchText, select) { + searchTextChange(value, select) { + this.set('searchText', value); + // Close dropdown if search text is cleared by the user. - if (isEmpty(searchText)) { + if (isEmpty(value)) { select.actions.close(); } }, @@ -185,7 +177,6 @@ export default Component.extend({ event.stopPropagation(); return false; } - } }, @@ -215,40 +206,11 @@ export default Component.extend({ } else if (current >= 0 && ['Backspace', 'Delete', 'Del'].includes(key)) { this.sendAction('removeItem', chips[current]); if (current >= chips.length) { - this.queueReset(); this.set('activeChip', -1); } } }, - resetInput() { - let select = this.get('autocomplete'); - let input = this.getInput(); - - if (input.is('.ember-paper-autocomplete-search-input') && isPresent(select)) { - // Reset the underlying ember-power-select so that it's ready for another selection. - input.val(''); - select.actions.search(''); - - // Close the dropdown after focusing the field. - input.focus(); - select.actions.close(); - } else { - input.focus(); - } - - this.set('focusedElement', 'input'); - this.set('resetTimer', null); - }, - - queueReset() { - if (this.get('resetTimer')) { - run.cancel(this.get('resetTimer')); - } - - this.set('resetTimer', run.next(this, this.resetInput)); - }, - closeAutocomplete() { if (!isEmpty(this.get('autocomplete')) && !isEmpty(this.get('autocomplete').actions)) { this.get('autocomplete').actions.close(); diff --git a/addon/templates/components/paper-autocomplete-trigger.hbs b/addon/templates/components/paper-autocomplete-trigger.hbs index 073d690c5..9b520e806 100644 --- a/addon/templates/components/paper-autocomplete-trigger.hbs +++ b/addon/templates/components/paper-autocomplete-trigger.hbs @@ -16,11 +16,10 @@ hideAllMessages=hideAllMessages}} {{else}} Template {{code-snippet name="autocomplete.basic-usage.hbs"}} diff --git a/yarn.lock b/yarn.lock index a798bd47d..711b990fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2734,9 +2734,9 @@ ember-cp-validations@^4.0.0-beta.0: ember-require-module "^0.2.0" ember-validators "^1.1.1" -ember-css-transitions@^0.1.14: - version "0.1.14" - resolved "https://registry.yarnpkg.com/ember-css-transitions/-/ember-css-transitions-0.1.14.tgz#85cbaad976bd8b5b4d88f2b4d517c00dc97455e4" +ember-css-transitions@^0.1.15: + version "0.1.15" + resolved "https://registry.yarnpkg.com/ember-css-transitions/-/ember-css-transitions-0.1.15.tgz#2a5b5fbba72092444edfe7fec315bb685250491d" dependencies: ember-cli-babel "^6.6.0"