Fixed chrome non-unique id error (#88)

HISTORY.md

@@ -1,3 +1,8 @@
+v4.7.8
+==================
+* Removed id #searchbox from px-dropdown and used the class variable .search__box.
+* This ensures no duplicate 'non-unique id' error that chrome console checks for.
+
 v4.7.6
 ==================
 * fix event documentation

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-dropdown",
-  "version": "4.7.7",
+  "version": "4.7.8",
   "main": [
     "px-dropdown.html"
   ],

package.json

@@ -2,7 +2,7 @@
   "name": "px-dropdown",
   "author": "General Electric",
   "description": "A Predix UI Dropdown component",
-  "version": "4.7.7",
+  "version": "4.7.8",
   "extName": null,
   "repository": {
     "type": "git",

px-dropdown-content.html

@@ -55,7 +55,6 @@
           <div class="u-p- fixed">
             <div class="search__form">
               <input
-                id="searchbox"
                 class="text-input search__box"
                 disabled$="[[disabled]]"
                 placeholder="{{placeholder}}"
@@ -728,7 +727,7 @@
                     && !node.hasAttribute('disabled') && !node.classList.contains('hidden'));
           }),
           focused = options.indexOf(this._focusedOption),
-          searchFocused = this.searchMode && Polymer.dom(this.$.dropdown).querySelector(':focus') === Polymer.dom(this.$.dropdown).querySelector('#searchbox');
+          searchFocused = this.searchMode && Polymer.dom(this.$.dropdown).querySelector(':focus') === Polymer.dom(this.$.dropdown).querySelector('.search__box');
       switch (keyPressed) {
         case 'space':
         case 'enter':
@@ -768,11 +767,11 @@
           }
           // If nothing is focused and search-mode is true, move to the search box
           else if (focused === -1 && this.searchMode && !searchFocused) {
-            Polymer.dom(this.$.dropdown).querySelector('#searchbox').focus();
+            Polymer.dom(this.$.dropdown).querySelector('.search__box').focus();
           }
           // If searchbox is focused, move to the first option
           else if (searchFocused) {
-            Polymer.dom(this.$.dropdown).querySelector('#searchbox').blur();
+            Polymer.dom(this.$.dropdown).querySelector('.search__box').blur();
             this.$.trigger.focus();
             this._setFocusedOption(options[0]);
           }
@@ -794,7 +793,7 @@
           }
           // If the first item is focused and search-mode is true, move to the search box
           else if (focused === 0 && this.searchMode && !searchFocused) {
-            Polymer.dom(this.$.dropdown).querySelector('#searchbox').focus();
+            Polymer.dom(this.$.dropdown).querySelector('.search__box').focus();
             this._setFocusedOption(null, options[0]);
           }
           // Else focus the last item in the list

test/px-dropdown-custom-tests.js

@@ -231,7 +231,7 @@ describe('Custom Automation Tests for search feature px-dropdown', function (don
   it('Check that search box appears when in search mode',
     function (done) {
       flush(()=>{
-        let input = Polymer.dom(px_dropdown.$.content.root).querySelector('#searchbox');
+        let input = Polymer.dom(px_dropdown.$.content.root).querySelector('.search__box');
         assert.isTrue(input.classList.contains('text-input'));
         done();
       });