Fixed not being able to provide custom suffix

Author: jhuesos

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This component follows *Semantic Versioning* (aka SemVer), visit (http://semver.org/) to learn more about it.
 
+## Release 3.0.2 (2017-08-23)
+### Bug Fixes
+- It is now again possible to add a custom `paper-input` suffix. See the new demo.
+
 ## Release 3.0.1 (2017-08-12)
 ### Bug Fixes
 - Removed duplicated `auto-validate` attribute from paper-autocomplete (thanks to @kaseyhinton).

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-autocomplete",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "authors": [
     "S. Francis",
     "Rodolfo Oviedo <[email protected]>",

demo/index.html

@@ -10,6 +10,7 @@
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../paper-toast/paper-toast.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../elliptical-sass/elliptical-sass.html">
   <link rel="import" href="../../css-docs/css-docs.html">
@@ -89,6 +90,18 @@ <h3>Local Data-Source Binding</h3>
       </template>
     </demo-snippet>
 
+    <demo-snippet>
+      <template>
+        <paper-autocomplete id="suffix"
+                            class="autocomplete-states"
+                            label="Using suffix"
+                            id="suffix-example">
+
+          <paper-icon-button slot="suffix" suffix icon="search"></paper-icon-button>
+        </paper-autocomplete>
+      </template>
+    </demo-snippet>
+
     <h3>Remote Data-Source Binding</h3>
     <p>
       Mock remote users data binding. Remote data binding delegates the responsibility of filtering the data source

package.json

@@ -1,7 +1,7 @@
 {
   "name": "paper-autocomplete",
   "description": "Material Design autocomplete component.",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "author": "S. Francis <[email protected]>",
   "contributors": [
     "Rodolfo Oviedo <[email protected]>",

paper-autocomplete-suggestions.html

@@ -8,6 +8,10 @@
 
   **From v3.x.x, this component only works with Polymer 1.7+ or 2.0+.**
 
+  [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ellipticaljs/paper-autocomplete)
+
+  [![Sauce Test Status](https://saucelabs.com/browser-matrix/jhuesos.svg)](https://saucelabs.com/u/jhuesos)
+
   Allows to add autocomplete capabilities to any input field. This is desirable when you have an input field with custom
   logic and you just want to add the feature to help users with the selection. If you want to use it in combination with
   a regular `<paper-input>`, you can use `<paper-autocomplete>`.

paper-autocomplete.html

@@ -13,6 +13,10 @@
 
   **From v3.x.x, this component only works with Polymer 1.7+ or 2.0+.**
 
+  [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ellipticaljs/paper-autocomplete)
+
+  [![Sauce Test Status](https://saucelabs.com/browser-matrix/jhuesos.svg)](https://saucelabs.com/u/jhuesos)
+
   paper-autocomplete extends earlier efforts such as this (https://github.com/rodo1111/paper-input-autocomplete)
   to provide keyboard support, remote binding and results scrolling.
 
@@ -139,7 +143,6 @@
 
       #clear {
         display: none;
-        margin-top: auto;
         line-height: 8px;
       }
 
@@ -189,6 +192,7 @@
 
         <!-- TODO: remove tabindex workaround when  is fixed https://github.com/PolymerElements/paper-input/issues/324 -->
         <paper-icon-button slot="suffix" suffix id="clear" icon="clear" on-click="_clear" tabindex="-1"></paper-icon-button>
+        <slot name="suffix" slot="suffix"></slot>
       </paper-input>
       <!-- to announce current selection to screen reader -->
       <span id="autocompleteStatus" role="status" class="sr-only">[[_highlightedSuggestion.textValue]]</span>
@@ -511,7 +515,7 @@
           return;
         }
 
-        this.$.clear.style.display = 'block';
+        this.$.clear.style.display = 'inline-block';
         this._isClearButtonVisible = true;
       },
 

test/index.html

@@ -19,7 +19,8 @@
       WCT.loadSuites([
         'paper-autocomplete_test_local.html',
         'paper-autocomplete_test_local.html?dom=shadow',
-        'paper-autocomplete_test_multi.html'
+        'paper-autocomplete_test_multi.html',
+        'paper-autocomplete_test_multi.html?dom=shadow'
       ]);
     </script>
 

test/paper-autocomplete_test_local.html

@@ -24,6 +24,17 @@
       </paper-autocomplete>
   </template>
   </test-fixture>
+
+  <test-fixture id='suffixTest'>
+    <template>
+      <paper-autocomplete
+        id='suffix'
+        name='state'>
+          <button slot="suffix" suffix id='suffixBtn'>OK</button>
+      </paper-autocomplete>
+    </template>
+  </test-fixture>
+
   <script>
     describe('paper-autocomplete', function () {
       var element, states;
@@ -236,14 +247,13 @@
 
             doInput(input, 'Ne');
             displayStyle = getClearButtonDisplayStyle();
-            expect(displayStyle).to.equal('none');
+            expect(displayStyle).to.equal('');
           });
 
           it('should display of the clear button when the option is set to false (default)', function () {
             doInput(input, 'New');
             displayStyle = getClearButtonDisplayStyle();
-            expect(displayStyle).to.equal('block');
-
+            expect(displayStyle).to.equal('inline-block');
           });
         });
       });
@@ -264,7 +274,7 @@
           doInput(input, 'A');
 
           expect(element.$.paperAutocompleteSuggestions.$.suggestionsWrapper.style.display).to.equal('block');
-          expect(getClearButtonDisplayStyle()).to.equal('block');
+          expect(getClearButtonDisplayStyle()).to.equal('inline-block');
 
           element.hideSuggestions();
 
@@ -311,6 +321,17 @@
         });
       });
 
+      it('element with slot=preffix should be added as paper-input suffix', function () {
+        var suffixElement = fixture('suffixTest');
+        var children = Polymer.dom(suffixElement.$$('paper-input').$$('paper-input-container')).getEffectiveChildNodes();
+        var isSuffixBtnAdded = [].slice.call(children)
+          .filter(function (ele) {
+            return ele.id === 'suffixBtn';
+          }).length === 1;
+
+        expect(isSuffixBtnAdded).to.be.true;
+      });
+
       a11ySuite('basic', ['badAriaAttributeValue', 'nonExistentRelatedElement']);
 
       // HELPERS
@@ -323,7 +344,7 @@
       }
 
       function getClearButtonDisplayStyle() {
-        return window.getComputedStyle(element.$.clear).getPropertyValue('display');
+        return element.$.clear.style.display;
       }
     });
   </script>