support for searchText binding (#524)

* kludge to fix glimmer2 support pending interaction from ember team * fixed issue with ember 2.7+ select-options * API change for autocomplete and support for tracking search text * fixed floating label issue * added readonly helper to searchText
adopted-ember-addons · Oct 17, 2016 · 374c005 · 374c005
1 parent 8b78516
commit 374c005
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/addon/components/paper-autocomplete-trigger.js b/addon/components/paper-autocomplete-trigger.js
@@ -6,12 +6,20 @@ export default Component.extend({
   tagName: 'md-autocomplete-wrap',
   classNameBindings: ['noLabel:md-whiteframe-z1', 'select.isOpen:md-menu-showing'],
 
-  text: computed('selected', 'extra.labelPath', {
+  text: computed('selected', 'extra.labelPath', 'searchText', {
     get() {
-      return this.getSelectedAsText();
+      if (this.get('selected')) {
+        return this.getSelectedAsText();
+      } else {
+        return this.get('searchText');
+      }
     },
     set(_, v) {
-      return v;
+      if (!this.get('selected') && this.get('searchText')) {
+        return this.get('searchText');
+      } else {
+        return v;
+      }
     }
   }),
 
@@ -66,11 +74,14 @@ export default Component.extend({
     },
 
     handleInputLocal(e) {
+      // If something is already selected when the user types, it should clear selection
+      if (this.get('selected')) {
+        this.get('select').actions.select(null);
+      }
       this.get('onInput')(e.target ? e : { target: { value: e } });
       this.set('text', e.target ? e.target.value : e);
     }
   },
-
   // Methods
   getSelectedAsText() {
     let labelPath = this.get('extra.labelPath');

diff --git a/addon/components/paper-autocomplete.js b/addon/components/paper-autocomplete.js
@@ -23,7 +23,9 @@ export default PowerSelect.extend({
     return { labelPath: this.get('labelPath'), label: this.get('label') };
   }),
 
-  onchange: computed.alias('onChange'),
+  onchange: computed.alias('onSelectionChange'),
+  searchText: '',
+  onSearchTextChange: computed.alias('oninput'),
   onfocus: computed.alias('onFocus'),
   onblur: computed.alias('onBlur'),
 

diff --git a/app/templates/components/paper-autocomplete.hbs b/app/templates/components/paper-autocomplete.hbs
@@ -40,6 +40,7 @@
       onKeydown=(action "onKeydown")
       searchEnabled=(readonly searchEnabled)
       searchField=(readonly searchField)
+      searchText=(readonly searchText)
       select=(readonly publicAPI)
       selected=(readonly selected)
       selectedItemComponent=(readonly selectedItemComponent)

diff --git a/tests/dummy/app/templates/demo/autocomplete.hbs b/tests/dummy/app/templates/demo/autocomplete.hbs
@@ -13,14 +13,16 @@
       onCreate=(action "addCountry")
       options=items
       allowClear=true
+      searchText=countrySearch
+      onSearchTextChange=(action (mut countrySearch))
       selected=selectedCountry
       search=(if simulateQuery (action "searchCountries"))
       searchField="name"
       labelPath="name"
       placeholder="Select a Country..."
       loadingMessage="Searching countries..."
       noMatchesMessage="Oops this country doesn't exist. Create a new country?"
-      onChange=(action (mut selectedCountry)) as |country select|}}
+      onSelectionChange=(action (mut selectedCountry)) as |country select|}}
       {{paper-autocomplete-highlight
         label=country.name
         searchText=select.searchText
@@ -34,6 +36,8 @@
       {{else}}
           Nothing selected...
       {{/if}}
+      <br>
+        Search text is {{countrySearch}}
     </p>
     {{#paper-checkbox
       value=firstDisabled
@@ -67,7 +71,7 @@
       placeholder="Type e.g. ember, paper, one, two etc."
       options=arrayOfItems
       selected=selectedItem
-      onChange=(action (mut selectedItem))
+      onSelectionChange=(action (mut selectedItem))
       as |item term|}}
       <span class="item-title">
         {{paper-icon "star"}}
@@ -113,7 +117,7 @@
           label="Select a Country..."
           loadingMessage="Searching countries..."
           noMatchesMessage="Oops this country doesn't exist."
-          onChange=(action (mut selectedCountry2)) as |country select|}}
+          onSelectionChange=(action (mut selectedCountry2)) as |country select|}}
           {{paper-autocomplete-highlight
             label=country.name
             searchText=select.searchText

diff --git a/tests/integration/components/paper-autocomplete-test.js b/tests/integration/components/paper-autocomplete-test.js
@@ -14,7 +14,7 @@ test('opens on click', function(assert) {
     placeholder="Item"
     options=items
     selected=selectedItem
-    onChange=(action (mut selectedItem))
+    onSelectionChange=(action (mut selectedItem))
     as |item|
   }}
     {{item}}
@@ -40,7 +40,7 @@ test('backdrop removed if select closed', function(assert) {
     placeholder="Item"
     options=items
     selected=selectedItem
-    onChange=(action (mut selectedItem))
+    onSelectionChange=(action (mut selectedItem))
     as |item|
   }}
     {{item}}
@@ -71,7 +71,7 @@ test('should render only enough items to fill the menu + 3', function(assert) {
     placeholder="Item"
     options=items
     selected=selectedItem
-    onChange=(action (mut selectedItem))
+    onSelectionChange=(action (mut selectedItem))
     as |item|
   }}
     {{item}}