fix(ac): don't use paper-autocomplete _innerText

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() {

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() {

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();

addon/templates/components/paper-autocomplete-trigger.hbs

@@ -16,11 +16,10 @@
     hideAllMessages=hideAllMessages}}
 {{else}}
   <input type="search"
-    value={{text}}
+    value={{readonly text}}
     class="ember-paper-autocomplete-search-input flex"
     placeholder={{readonly placeholder}}
     oninput={{action "handleInputLocal"}}
-    onchange={{action "handleInputLocal"}}
     onfocus={{action onFocus}}
     onblur={{action onBlur}}
     onkeydown={{action "handleKeydown"}}

addon/templates/components/paper-autocomplete.hbs

@@ -49,7 +49,6 @@
       onKeydown=(action "onKeydown")
       searchEnabled=(readonly searchEnabled)
       searchField=(readonly searchField)
-      searchText=(readonly searchText)
       validationErrorMessages=(readonly validationErrorMessages)
       select=(readonly publicAPI)
       selectedItemComponent=(readonly selectedItemComponent)

addon/templates/components/paper-chips.hbs

@@ -37,6 +37,7 @@
           search=search
           matcher=matcher
           noMatchesMessage=noMatchesMessage
+          searchText=(readonly searchText)
           onBlur=(action "inputBlur")
           onSelectionChange=(action "autocompleteChange")
           onSearchTextChange=(action "searchTextChange")

tests/dummy/app/controllers/demo/autocomplete.js

@@ -15,6 +15,13 @@ export default Controller.extend({
 
   searchText: '',
 
+  highlightFirstMatch(api) {
+    if (api && api.results && api.results.length) {
+      return api.results[0];
+    }
+    return null;
+  },
+
   actions: {
     updateFilter(str) {
       this.set('searchText', str);

tests/dummy/app/templates/demo/autocomplete.hbs

@@ -13,6 +13,7 @@
       onCreate=(action "addCountry")
       options=items
       allowClear=true
+      defaultHighlighted=(if enableDefaultHighlighted highlightFirstMatch)
       searchText=(readonly countrySearchText)
       onSearchTextChange=(action (mut countrySearchText))
       selected=selectedCountry
@@ -47,6 +48,19 @@
       onChange=(action (mut simulateQuery))}}
       Simulate query
     {{/paper-checkbox}}
+    {{#paper-checkbox
+      value=enableDefaultHighlighted
+      onChange=(action (mut enableDefaultHighlighted))}}
+      Highlight first match
+    {{/paper-checkbox}}
+    {{paper-button
+      primary=true
+      label="Reset search-Text"
+      onClick=(action (mut countrySearchText) '')}}
+    {{paper-button
+      primary=true
+      label="Reset selected"
+      onClick=(action (mut selectedCountry) null)}}
 
     <h3>Template</h3>
     {{code-snippet name="autocomplete.basic-usage.hbs"}}

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"