Fix selection is incorrect when items changed but items count remained (#112)

* Fix selection is incorrect when items changed but items count remained

* 4.10.1

Author: benjaminliugang

.travis.yml

@@ -1,18 +1,20 @@
 sudo: required
-dist: trusty
+dist: xenial
 language: node_js
 node_js:
-- 9
+- 10.0.0
 branches:
   except:
   - gh-pages
 addons:
-  firefox: latest
   apt:
-    sources:
-    - google-chrome
     packages:
-    - google-chrome-stable
+      # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
+      - libgconf-2-4
+  chrome: beta
+  firefox: latest
+before_install:
+  - google-chrome-beta --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
 before_script:
 - yarn add polymer-cli
 - polymer install --variants

HISTORY.md

@@ -1,3 +1,7 @@
+# v4.10.1
+
+- Fix selection is incorrect when items changed but items count remained issue.
+
 # v4.9.3
 
 - Use margin right and left to avoid browser specific prefix fix for rtl space issue.

bower.json

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

package-lock.json

@@ -2,7 +2,7 @@
   "name": "px-dropdown",
   "author": "General Electric",
   "description": "A Predix UI Dropdown component",
-  "version": "4.9.3",
+  "version": "4.10.1",
   "extName": null,
   "scripts": {
     "clean": "gulp clean",

package.json

@@ -535,7 +535,11 @@
           }
         }.bind(this));
       }
+      var shouldRenderSynchronously = newComputedItems.length === this._computedItems.length;
       this._computedItems = newComputedItems;
+      if (shouldRenderSynchronously) {
+        this.$.dropdownItems.render();
+      }
       if(this.clearSelectionsOnChange) {
         this.set('selected', null);
         this.set('selectedValues', []);
@@ -568,7 +572,7 @@
     *
     * @event px-dropdown-click
     */
-    _handleActivate: function(evt) { 
+    _handleActivate: function(evt) {
       if(evt.detail.item.hasAttribute('disabled') || this.readOnly || this.disabledViewable) {
         evt.preventDefault();
       }
@@ -624,7 +628,7 @@
       if(this.multi && this.$.selector.selectedItems.length > 0 && this.$.selector.selectedItems.length <= this.displayValueCount && !this.hideSelected) {
         this.displayValueSelected = this.$.selector.selectedItems.map(function(item) {
           return item.val.trim();
-        }).join(', ');      
+        }).join(', ');
       }
       else if(this.multi && this.selectedValues.length > this.displayValueCount && !this.hideSelected) {
         this.displayValueSelected = this.selectedValues.length + ' ' + this.localize('selected');
@@ -731,7 +735,7 @@
     /**
      * Adds the class that sets pointer-events = none to disable user interactions.
      */
-    _setReadOnly: function() {      
+    _setReadOnly: function() {
       if (this.multi && this.readOnly){
         this.toggleClass('dropdown--read-only-multi',true,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
       } else if (this.readOnly) {

px-dropdown-content.html

@@ -173,7 +173,8 @@
         hide-selected="[[hideSelected]]"
         allow-outside-scroll="[[allowOutsideScroll]]"
         display-value-selected="{{_displayValueSelected}}"
-        disable-truncate="[[disableTruncate]]">
+        disable-truncate="[[disableTruncate]]"
+        clear-selections-on-change="[[clearSelectionsOnChange]]">
       </px-dropdown-content>
     </px-overlay-content>
   </template>
@@ -231,7 +232,7 @@
         observer: '_resetMinWidth'
       },
       /**
-       * The number of values to display as a comma separated string on multi select lists. 
+       * The number of values to display as a comma separated string on multi select lists.
        * Selections greater then this number will display as "N Selected"
        */
       displayValueCount: {