From 3d1857de79e821fd5152823ca3af94ffe33ca323 Mon Sep 17 00:00:00 2001
From: Adrian Hangan <adrian.hangan@nordlogic.com>
Date: Tue, 28 Mar 2017 17:16:25 +0300
Subject: [PATCH 1/5] testing selected value

---
 demo/index.html | 220 ++++++++++++++++++++++++------------------------
 1 file changed, 110 insertions(+), 110 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 086da49..f37eeab 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -28,110 +28,110 @@
     <div class="vertical-section-container centered">
       <h1>etools-searchable-multiselection-menu demo</h1>
       
-      <h2>Single selection, with search</h2>
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
-          <etools-searchable-multiselection-menu
-                  label="Searchable menu"
-                  options="[[realOptions]]"
-                  value="{{selectedValues}}"></etools-searchable-multiselection-menu>
-        </template>
-      </demo-snippet>
-
-      <h2>Single selection, with search, always display an empty value</h2>
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
-          <etools-searchable-multiselection-menu
-              label="Searchable menu"
-              options="[[realOptions]]"
-              empty-value
-              value="{{selectedValues}}"></etools-searchable-multiselection-menu>
-        </template>
-      </demo-snippet>
-
-
-      <h2>Single selection, with search, limit of 3 elements</h2>
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
-          <etools-searchable-multiselection-menu
-              label="Searchable menu"
-              options="[[realOptions]]"
-              shown-items-limit="3"
-              value="{{selectedValues}}"></etools-searchable-multiselection-menu>
-        </template>
-      </demo-snippet>
-
-      <h2>Single selection, without search</h2>
-
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
-          <etools-searchable-multiselection-menu label="Searchable menu"
-                                                 options="[[realOptions]]"
-                                                 value="{{selectedValues}}"
-                                                 hide-search></etools-searchable-multiselection-menu>
-        </template>
-      </demo-snippet>
-
-      <h2>Single selection, disabled</h2>
-
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
-          <etools-searchable-multiselection-menu label="Searchable menu"
-                                                 options="[[realOptions]]"
-                                                 value="{{selectedValues}}"
-                                                 disabled></etools-searchable-multiselection-menu>
-        </template>
-      </demo-snippet>
-
-
-      <h2>Multi selection, with search</h2>
-
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"
-                       massive-selected-values="{{massiveSelectedValues}}"></demo-helper>
-          <etools-searchable-multiselection-menu label="Multiselection Searchable menu"
-                                                 options="[[realOptions]]"
-                                                 value="{{massiveSelectedValues}}"
-                                                 multi></etools-searchable-multiselection-menu>
-        </template>
-      </demo-snippet>
-
-
-      <h2>Multi selection, disabled</h2>
-
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
-          <etools-searchable-multiselection-menu label="Multiselection Searchable menu"
-                                                 options="[[realOptions]]"
-                                                 value="{{selectedValues}}"
-                                                 multi
-                                                 disabled></etools-searchable-multiselection-menu>
-        </template>
-      </demo-snippet>
-
-      <h2>Change event('value-change') examples</h2>
-
-      <demo-snippet>
-        <template is="dom-bind">
-          <demo-with-change-event></demo-with-change-event>
-        </template>
-      </demo-snippet>
-
-      <h2>Error messages and validations</h2>
-
-      <demo-snippet>
-        <template>
-          <demo-error-messages-and-validations></demo-error-messages-and-validations>
-        </template>
-      </demo-snippet>
-      
+      <!--<h2>Single selection, with search</h2>-->
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
+          <!--<etools-searchable-multiselection-menu-->
+                  <!--label="Searchable menu"-->
+                  <!--options="[[realOptions]]"-->
+                  <!--value="{{selectedValues}}"></etools-searchable-multiselection-menu>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+      <!--<h2>Single selection, with search, always display an empty value</h2>-->
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
+          <!--<etools-searchable-multiselection-menu-->
+              <!--label="Searchable menu"-->
+              <!--options="[[realOptions]]"-->
+              <!--empty-value-->
+              <!--value="{{selectedValues}}"></etools-searchable-multiselection-menu>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+
+      <!--<h2>Single selection, with search, limit of 3 elements</h2>-->
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
+          <!--<etools-searchable-multiselection-menu-->
+              <!--label="Searchable menu"-->
+              <!--options="[[realOptions]]"-->
+              <!--shown-items-limit="3"-->
+              <!--value="{{selectedValues}}"></etools-searchable-multiselection-menu>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+      <!--<h2>Single selection, without search</h2>-->
+
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
+          <!--<etools-searchable-multiselection-menu label="Searchable menu"-->
+                                                 <!--options="[[realOptions]]"-->
+                                                 <!--value="{{selectedValues}}"-->
+                                                 <!--hide-search></etools-searchable-multiselection-menu>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+      <!--<h2>Single selection, disabled</h2>-->
+
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
+          <!--<etools-searchable-multiselection-menu label="Searchable menu"-->
+                                                 <!--options="[[realOptions]]"-->
+                                                 <!--value="{{selectedValues}}"-->
+                                                 <!--disabled></etools-searchable-multiselection-menu>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+
+      <!--<h2>Multi selection, with search</h2>-->
+
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"-->
+                       <!--massive-selected-values="{{massiveSelectedValues}}"></demo-helper>-->
+          <!--<etools-searchable-multiselection-menu label="Multiselection Searchable menu"-->
+                                                 <!--options="[[realOptions]]"-->
+                                                 <!--value="{{massiveSelectedValues}}"-->
+                                                 <!--multi></etools-searchable-multiselection-menu>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+
+      <!--<h2>Multi selection, disabled</h2>-->
+
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
+          <!--<etools-searchable-multiselection-menu label="Multiselection Searchable menu"-->
+                                                 <!--options="[[realOptions]]"-->
+                                                 <!--value="{{selectedValues}}"-->
+                                                 <!--multi-->
+                                                 <!--disabled></etools-searchable-multiselection-menu>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+      <!--<h2>Change event('value-change') examples</h2>-->
+
+      <!--<demo-snippet>-->
+        <!--<template is="dom-bind">-->
+          <!--<demo-with-change-event></demo-with-change-event>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+
+      <!--<h2>Error messages and validations</h2>-->
+
+      <!--<demo-snippet>-->
+        <!--<template>-->
+          <!--<demo-error-messages-and-validations></demo-error-messages-and-validations>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
+      <!---->
 
       <h2>Custom objects as options. You can specify value and label properties from object option to be used.</h2>
 
@@ -141,13 +141,13 @@ <h2>Custom objects as options. You can specify value and label properties from o
         </template>
       </demo-snippet>
 
-      <h2>Readonly state</h2>
+      <!--<h2>Readonly state</h2>-->
 
-      <demo-snippet>
-        <template>
-          <demo-readonly-state></demo-readonly-state>
-        </template>
-      </demo-snippet>
+      <!--<demo-snippet>-->
+        <!--<template>-->
+          <!--<demo-readonly-state></demo-readonly-state>-->
+        <!--</template>-->
+      <!--</demo-snippet>-->
 
     </div>
 

From 22ebe3b72511c73c07998a00c1f1a6fee908977a Mon Sep 17 00:00:00 2001
From: Adrian Hangan <adrian.hangan@nordlogic.com>
Date: Wed, 29 Mar 2017 20:24:24 +0300
Subject: [PATCH 2/5] selected values reset bug fix

---
 demo/demo-custom-objects-as-options.html   |  64 ++++-----
 etools-searchable-multiselection-menu.html | 148 +++++++++++++--------
 2 files changed, 127 insertions(+), 85 deletions(-)

diff --git a/demo/demo-custom-objects-as-options.html b/demo/demo-custom-objects-as-options.html
index 60cebde..3cf14bb 100644
--- a/demo/demo-custom-objects-as-options.html
+++ b/demo/demo-custom-objects-as-options.html
@@ -4,25 +4,25 @@
 <dom-module id="demo-custom-objects-as-options">
   <template>
 
-    <h3>Single selection, custom objects as options</h3>
-    <etools-searchable-multiselection-menu
-        label="Searchable menu, custom objects"
-        options="[[customObjOptions]]"
-        custom-object-options
-        option-value="option_key"
-        option-label="option_label"
-        on-value-change="_singleSelectionChanged" dynamic-align></etools-searchable-multiselection-menu>
-
-    <h3>Multiple selection, custom objects as options</h3>
-    <etools-searchable-multiselection-menu
-        label="Multi searchable menu, custom objects"
-        options="[[customObjOptions]]"
-        custom-object-options
-        option-value="option_key"
-        option-label="option_label"
-        placeholder="Please select the options"
-        on-value-change="_multiSelectionChanged"
-        multi dynamic-align></etools-searchable-multiselection-menu>
+    <!--<h3>Single selection, custom objects as options</h3>-->
+    <!--<etools-searchable-multiselection-menu-->
+        <!--label="Searchable menu, custom objects"-->
+        <!--options="[[customObjOptions]]"-->
+        <!--custom-object-options-->
+        <!--option-value="option_key"-->
+        <!--option-label="option_label"-->
+        <!--on-value-change="_singleSelectionChanged" dynamic-align></etools-searchable-multiselection-menu>-->
+
+    <!--<h3>Multiple selection, custom objects as options</h3>-->
+    <!--<etools-searchable-multiselection-menu-->
+        <!--label="Multi searchable menu, custom objects"-->
+        <!--options="[[customObjOptions]]"-->
+        <!--custom-object-options-->
+        <!--option-value="option_key"-->
+        <!--option-label="option_label"-->
+        <!--placeholder="Please select the options"-->
+        <!--on-value-change="_multiSelectionChanged"-->
+        <!--multi dynamic-align></etools-searchable-multiselection-menu>-->
 
     <h3>Custom objects as options and selected property with no change events</h3>
 
@@ -37,17 +37,17 @@ <h3>Custom objects as options and selected property with no change events</h3>
         update-selected dynamic-align empty-value style="width: 350px;"></etools-searchable-multiselection-menu>
 
     <p><span>SelectedIDs:</span> [[_returnIdsString(selectedIds)]]</p>
-    <etools-searchable-multiselection-menu
-        label="Multi searchable menu, custom objects"
-        options="[[customObjOptions]]"
-        custom-object-options
-        option-value="id"
-        option-label="option_label"
-        selected="{{selectedIds}}"
-        update-selected
-        placeholder="Please select the options"
-        multi
-        dynamic-align></etools-searchable-multiselection-menu>
+    <!--<etools-searchable-multiselection-menu-->
+        <!--label="Multi searchable menu, custom objects"-->
+        <!--options="[[customObjOptions]]"-->
+        <!--custom-object-options-->
+        <!--option-value="id"-->
+        <!--option-label="option_label"-->
+        <!--selected="{{selectedIds}}"-->
+        <!--update-selected-->
+        <!--placeholder="Please select the options"-->
+        <!--multi-->
+        <!--dynamic-align></etools-searchable-multiselection-menu>-->
 
   </template>
   <script>
@@ -89,9 +89,9 @@ <h3>Custom objects as options and selected property with no change events</h3>
           //  this.set('selectedValues',  [{value: 2, label: 'Option 2'}]);
           // this.set('selectedId', 3);
 
-          setTimeout(function() {
+          //setTimeout(function() {
             this.set('customObjOptions', this.generateOptions());
-          }.bind(this), 3000);
+          //}.bind(this), 3000);
           
           // setTimeout(function() {
           //   this.set('selectedIds', null);
diff --git a/etools-searchable-multiselection-menu.html b/etools-searchable-multiselection-menu.html
index 471fa79..27bc5ea 100644
--- a/etools-searchable-multiselection-menu.html
+++ b/etools-searchable-multiselection-menu.html
@@ -377,7 +377,8 @@
             reflectToAttribute: true
           },
           options: {
-            type: Array
+            type: Array,
+            observer: '_optionsChanged'
           },
           shownItems: {
             type: Array,
@@ -459,7 +460,8 @@
             value: 'label'
           },
           selected: {
-            notify: true
+            notify: true,
+            observer: '_selectedOptionsChanged'
           },
           _prevSelectedValues: {
             type: Object
@@ -480,12 +482,15 @@
           selectedRequiresValidOptions: {
             type: Boolean,
             value: false
+          },
+          notFoundValues: {
+            type: Array,
+            notify: true,
+            value: []
           }
-          
         },
 
         observers: [
-          '_selectedChanged(selected, options)',
           '_optionsLengthChanged(options.length)'
         ],
 
@@ -564,6 +569,14 @@
           }
           if(!this.multi) {
             this.selectedValues = e.model.item.value;
+
+            if (this.selectedValues === null) {
+              if (this.value === null && this.updateSelected &&
+                this.notFoundValues instanceof Array && this.notFoundValues.length) {
+                this.set('selected', null);
+              }
+            }
+
             this._valueSelected();
             this.$.dropdownMenu.close();
           }
@@ -689,67 +702,86 @@
           }
         },
 
-        _selectedChanged: function(selected, options) {
-          if (!this.updateSelected) {
-            return;
+        _optionsChanged: function(options) {
+          if (options instanceof Array) {
+            this._selectionChanged(this.selected, options);
           }
-          
-          if (this.selectedRequiresValidOptions &&
-            (options instanceof Array === false ||
-            (options instanceof Array && options.length === 0))) {
+        },
+
+        _selectedOptionsChanged: function(selected, oldSelected) {
+          if (this.multi && JSON.stringify(selected) === JSON.stringify(oldSelected)) {
             return;
           }
-          
-          var currentValue = null;
-          var notFoundValue = [];
-          if (this.multi) {
-            currentValue = [];
-            if (selected instanceof Array && selected.length > 0) {
-              if (options instanceof Array && options.length > 0) {
-                selected.forEach(function(selectedVal) {
-                  var s = this._prepareValue(selectedVal);
-                  notFoundValue.push(s);
-                  for (var i = 0; i < options.length; i++) {
-                    if (this._prepareValue(options[i][this.optionValue]) === s) {
-                      currentValue.push(options[i]);
-                      notFoundValue.splice(notFoundValue.indexOf(s), 1);
+          this._selectionChanged(selected, this.options);
+        },
+
+        _selectionChanged: function(selected, options) {
+          this.debounce('selectionChanged', function() {
+            if (!this.updateSelected) {
+              return;
+            }
+
+            if (this.selectedRequiresValidOptions &&
+              (options instanceof Array === false ||
+              (options instanceof Array && options.length === 0))) {
+              return;
+            }
+
+            var currentValue = null;
+            var notFoundValues = [];
+            var i;
+            if (this.multi) {
+              // multiple selection
+              currentValue = [];
+              if (selected instanceof Array && selected.length > 0) {
+                notFoundValues = JSON.parse(JSON.stringify(selected));
+                if (options instanceof Array && options.length > 0) {
+                  selected.forEach(function(selectedVal) {
+                    var s = this._prepareValue(selectedVal);
+                    for (i = 0; i < options.length; i++) {
+                      if (this._prepareValue(options[i][this.optionValue]) === s) {
+                        currentValue.push(options[i]);
+                        notFoundValues.splice(notFoundValues.indexOf(selectedVal), 1);
+                        break;
+                      }
+                    }
+                  }.bind(this));
+                }
+              }
+            } else {
+              // single selection
+              if (selected && (typeof selected === 'string' || typeof selected === 'number')) {
+                var selectedVal = this._prepareValue(selected);
+                notFoundValues.push(selectedVal);
+                if (options instanceof Array && options.length > 0) {
+                  for (i = 0; i < options.length; i++) {
+                    if (this._prepareValue(options[i][this.optionValue]) === selectedVal) {
+                      currentValue = options[i];
+                      notFoundValues.splice(notFoundValues.indexOf(selectedVal), 1);
                       break;
                     }
                   }
-                }.bind(this));
-              }
-            }
-
-          } else {
-            if ((selected && (typeof selected === 'string' || typeof selected === 'number')) &&
-                options instanceof Array && options.length > 0) {
-              var selectedVal = this._prepareValue(selected);
-              notFoundValue.push(selectedVal);
-              for (var i = 0; i < options.length; i++) {
-                if (this._prepareValue(options[i][this.optionValue]) === selectedVal) {
-                  currentValue = options[i];
-                  notFoundValue.splice(notFoundValue.indexOf(selectedVal), 1);
-                  break;
                 }
               }
             }
-          }
 
-          if (JSON.stringify(this.value) !== JSON.stringify(currentValue)) {
-            this.set('value', currentValue);
-          }
+            this.set('notFoundValues', notFoundValues);
+            if (JSON.stringify(this.value) !== JSON.stringify(currentValue)) {
+              this.set('value', currentValue);
+            }
 
-          // not found selected values in options
-          if (notFoundValue.length > 0) {
-            var warnMsg = '[etools-esmm] Selected ';
-            if (notFoundValue.length === 1) {
-              warnMsg += 'value ';
-            } else {
-              warnMsg += 'values '
+            // not found selected values in options
+            if (notFoundValues.length > 0) {
+              var warnMsg = '[etools-esmm] Selected ';
+              if (notFoundValues.length === 1) {
+                warnMsg += 'value ';
+              } else {
+                warnMsg += 'values '
+              }
+              warnMsg += notFoundValues.join(', ') + ' not found in dropdown\'s options!' ;
+              console.warn(warnMsg);
             }
-            warnMsg += notFoundValue.join(', ') + ' not found in dropdown\'s options!' ;
-            console.warn(warnMsg);
-          }
+          }.bind(this), 50);
         },
 
         _updateSelected: function(selectedValues, oldSelectedValues) {
@@ -783,6 +815,11 @@
                   return this._prepareValue(s);
                 }.bind(this));
               }
+              if (this.notFoundValues.length) {
+                this.notFoundValues.forEach(function(notFoundVal) {
+                  selectedVals.push(this._prepareValue(notFoundVal));
+                }.bind(this));
+              }
             }
 
             if (!this.multi) {
@@ -790,7 +827,12 @@
               if (selectedValues && !(typeof selectedValues === 'string' && selectedValues === '')) {
                 selectedVals = this._prepareValue(selectedValues);
               }
+              if (!selectedVals && this.notFoundValues.length) {
+                this.set('_prevSelectedValues', this.notFoundValues[0]);
+                return;
+              }
             }
+
             this.set('_prevSelectedValues', selectedVals);
             this.set('selected', selectedVals);
           }.bind(this), 50);

From ae36c7e7e2c42c09928c05c1ee2fd006506a8ef4 Mon Sep 17 00:00:00 2001
From: Adrian Hangan <iovuadrian@gmail.com>
Date: Thu, 30 Mar 2017 09:27:33 +0300
Subject: [PATCH 3/5] updates

---
 demo/demo-custom-objects-as-options.html   | 60 +++++++++++-----------
 etools-searchable-multiselection-menu.html |  2 +-
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/demo/demo-custom-objects-as-options.html b/demo/demo-custom-objects-as-options.html
index 3cf14bb..f0fa515 100644
--- a/demo/demo-custom-objects-as-options.html
+++ b/demo/demo-custom-objects-as-options.html
@@ -4,25 +4,25 @@
 <dom-module id="demo-custom-objects-as-options">
   <template>
 
-    <!--<h3>Single selection, custom objects as options</h3>-->
-    <!--<etools-searchable-multiselection-menu-->
-        <!--label="Searchable menu, custom objects"-->
-        <!--options="[[customObjOptions]]"-->
-        <!--custom-object-options-->
-        <!--option-value="option_key"-->
-        <!--option-label="option_label"-->
-        <!--on-value-change="_singleSelectionChanged" dynamic-align></etools-searchable-multiselection-menu>-->
-
-    <!--<h3>Multiple selection, custom objects as options</h3>-->
-    <!--<etools-searchable-multiselection-menu-->
-        <!--label="Multi searchable menu, custom objects"-->
-        <!--options="[[customObjOptions]]"-->
-        <!--custom-object-options-->
-        <!--option-value="option_key"-->
-        <!--option-label="option_label"-->
-        <!--placeholder="Please select the options"-->
-        <!--on-value-change="_multiSelectionChanged"-->
-        <!--multi dynamic-align></etools-searchable-multiselection-menu>-->
+    <h3>Single selection, custom objects as options</h3>
+    <etools-searchable-multiselection-menu
+        label="Searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="option_key"
+        option-label="option_label"
+        on-value-change="_singleSelectionChanged" dynamic-align></etools-searchable-multiselection-menu>
+
+    <h3>Multiple selection, custom objects as options</h3>
+    <etools-searchable-multiselection-menu
+        label="Multi searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="option_key"
+        option-label="option_label"
+        placeholder="Please select the options"
+        on-value-change="_multiSelectionChanged"
+        multi dynamic-align></etools-searchable-multiselection-menu>
 
     <h3>Custom objects as options and selected property with no change events</h3>
 
@@ -37,17 +37,17 @@ <h3>Custom objects as options and selected property with no change events</h3>
         update-selected dynamic-align empty-value style="width: 350px;"></etools-searchable-multiselection-menu>
 
     <p><span>SelectedIDs:</span> [[_returnIdsString(selectedIds)]]</p>
-    <!--<etools-searchable-multiselection-menu-->
-        <!--label="Multi searchable menu, custom objects"-->
-        <!--options="[[customObjOptions]]"-->
-        <!--custom-object-options-->
-        <!--option-value="id"-->
-        <!--option-label="option_label"-->
-        <!--selected="{{selectedIds}}"-->
-        <!--update-selected-->
-        <!--placeholder="Please select the options"-->
-        <!--multi-->
-        <!--dynamic-align></etools-searchable-multiselection-menu>-->
+    <etools-searchable-multiselection-menu
+        label="Multi searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="id"
+        option-label="option_label"
+        selected="{{selectedIds}}"
+        update-selected
+        placeholder="Please select the options"
+        multi
+        dynamic-align></etools-searchable-multiselection-menu>
 
   </template>
   <script>
diff --git a/etools-searchable-multiselection-menu.html b/etools-searchable-multiselection-menu.html
index 27bc5ea..1ccf227 100644
--- a/etools-searchable-multiselection-menu.html
+++ b/etools-searchable-multiselection-menu.html
@@ -567,7 +567,7 @@
           if (this.readonly) {
             return;
           }
-          if(!this.multi) {
+          if (!this.multi) {
             this.selectedValues = e.model.item.value;
 
             if (this.selectedValues === null) {

From 8daefaf39bc76917517cd128c2bb30d458a506bf Mon Sep 17 00:00:00 2001
From: Adrian Hangan <adrian.hangan@nordlogic.com>
Date: Thu, 30 Mar 2017 10:14:41 +0300
Subject: [PATCH 4/5] docs updates

---
 README.md  | 10 +++++++---
 bower.json |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index f8ce601..d75cbd4 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,9 @@ Dropdown menu with search and multiple options selection
 
 ### Element properties
 
-
-* allowOutsideScroll - boolean, default: false
-* autoValidate - boolean
+* allowOutsideScroll - Boolean, default: false
+* autoValidate - Boolean
+* capitalizeInputShown - Boolean
 * customObjectOptions - Boolean, default: false
 * disabled - Boolean, default: false
 * dynamicAlign - Boolean, default: false
@@ -19,6 +19,8 @@ Dropdown menu with search and multiple options selection
 * menuOpened - Boolean, default: false – notifies
 * multi - Boolean, default: false
 * noChangeEvent - Boolean, default: false
+* noOptionsAvailable - Boolean, default: false
+* notFoundValues - Array
 * optionLabel - String, default: label
 * options - Array
 * optionValue - String, default: 'value'
@@ -27,6 +29,8 @@ Dropdown menu with search and multiple options selection
 * required - boolean
 * search - String
 * selected - Number/Array - notifies
+* selectedRequiresValidOptions - Boolean, default: false; using this and selected will ensure selected values will 
+be set only if the options are not empty
 * selectedValues - Object notifies
 * showLimitWarning - Boolean
 * shownItems - Array
diff --git a/bower.json b/bower.json
index a615aea..83a8f33 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "etools-searchable-multiselection-menu",
   "description": "Dropdown menu with search and multiple options selection",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "license": "https://github.com/unicef-polymer/etools-searchable-multiselection-menu/blob/master/LICENSE.md",
   "main": "etools-searchable-multiselection-menu.html",
   "dependencies": {

From 9d0910153ab7f97ffe44df611a9ce712166686da Mon Sep 17 00:00:00 2001
From: Adrian Hangan <adrian.hangan@nordlogic.com>
Date: Thu, 30 Mar 2017 10:17:11 +0300
Subject: [PATCH 5/5] restore old demos

---
 demo/index.html | 220 ++++++++++++++++++++++++------------------------
 1 file changed, 110 insertions(+), 110 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index f37eeab..4f72605 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -28,110 +28,110 @@
     <div class="vertical-section-container centered">
       <h1>etools-searchable-multiselection-menu demo</h1>
       
-      <!--<h2>Single selection, with search</h2>-->
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
-          <!--<etools-searchable-multiselection-menu-->
-                  <!--label="Searchable menu"-->
-                  <!--options="[[realOptions]]"-->
-                  <!--value="{{selectedValues}}"></etools-searchable-multiselection-menu>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-      <!--<h2>Single selection, with search, always display an empty value</h2>-->
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
-          <!--<etools-searchable-multiselection-menu-->
-              <!--label="Searchable menu"-->
-              <!--options="[[realOptions]]"-->
-              <!--empty-value-->
-              <!--value="{{selectedValues}}"></etools-searchable-multiselection-menu>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-
-      <!--<h2>Single selection, with search, limit of 3 elements</h2>-->
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
-          <!--<etools-searchable-multiselection-menu-->
-              <!--label="Searchable menu"-->
-              <!--options="[[realOptions]]"-->
-              <!--shown-items-limit="3"-->
-              <!--value="{{selectedValues}}"></etools-searchable-multiselection-menu>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-      <!--<h2>Single selection, without search</h2>-->
-
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
-          <!--<etools-searchable-multiselection-menu label="Searchable menu"-->
-                                                 <!--options="[[realOptions]]"-->
-                                                 <!--value="{{selectedValues}}"-->
-                                                 <!--hide-search></etools-searchable-multiselection-menu>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-      <!--<h2>Single selection, disabled</h2>-->
-
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
-          <!--<etools-searchable-multiselection-menu label="Searchable menu"-->
-                                                 <!--options="[[realOptions]]"-->
-                                                 <!--value="{{selectedValues}}"-->
-                                                 <!--disabled></etools-searchable-multiselection-menu>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-
-      <!--<h2>Multi selection, with search</h2>-->
-
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"-->
-                       <!--massive-selected-values="{{massiveSelectedValues}}"></demo-helper>-->
-          <!--<etools-searchable-multiselection-menu label="Multiselection Searchable menu"-->
-                                                 <!--options="[[realOptions]]"-->
-                                                 <!--value="{{massiveSelectedValues}}"-->
-                                                 <!--multi></etools-searchable-multiselection-menu>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-
-      <!--<h2>Multi selection, disabled</h2>-->
-
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>-->
-          <!--<etools-searchable-multiselection-menu label="Multiselection Searchable menu"-->
-                                                 <!--options="[[realOptions]]"-->
-                                                 <!--value="{{selectedValues}}"-->
-                                                 <!--multi-->
-                                                 <!--disabled></etools-searchable-multiselection-menu>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-      <!--<h2>Change event('value-change') examples</h2>-->
-
-      <!--<demo-snippet>-->
-        <!--<template is="dom-bind">-->
-          <!--<demo-with-change-event></demo-with-change-event>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-
-      <!--<h2>Error messages and validations</h2>-->
-
-      <!--<demo-snippet>-->
-        <!--<template>-->
-          <!--<demo-error-messages-and-validations></demo-error-messages-and-validations>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
-      <!---->
+      <h2>Single selection, with search</h2>
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
+          <etools-searchable-multiselection-menu
+                  label="Searchable menu"
+                  options="[[realOptions]]"
+                  value="{{selectedValues}}"></etools-searchable-multiselection-menu>
+        </template>
+      </demo-snippet>
+
+      <h2>Single selection, with search, always display an empty value</h2>
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
+          <etools-searchable-multiselection-menu
+              label="Searchable menu"
+              options="[[realOptions]]"
+              empty-value
+              value="{{selectedValues}}"></etools-searchable-multiselection-menu>
+        </template>
+      </demo-snippet>
+
+
+      <h2>Single selection, with search, limit of 3 elements</h2>
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
+          <etools-searchable-multiselection-menu
+              label="Searchable menu"
+              options="[[realOptions]]"
+              shown-items-limit="3"
+              value="{{selectedValues}}"></etools-searchable-multiselection-menu>
+        </template>
+      </demo-snippet>
+
+      <h2>Single selection, without search</h2>
+
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
+          <etools-searchable-multiselection-menu label="Searchable menu"
+                                                 options="[[realOptions]]"
+                                                 value="{{selectedValues}}"
+                                                 hide-search></etools-searchable-multiselection-menu>
+        </template>
+      </demo-snippet>
+
+      <h2>Single selection, disabled</h2>
+
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
+          <etools-searchable-multiselection-menu label="Searchable menu"
+                                                 options="[[realOptions]]"
+                                                 value="{{selectedValues}}"
+                                                 disabled></etools-searchable-multiselection-menu>
+        </template>
+      </demo-snippet>
+
+
+      <h2>Multi selection, with search</h2>
+
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"
+                       massive-selected-values="{{massiveSelectedValues}}"></demo-helper>
+          <etools-searchable-multiselection-menu label="Multiselection Searchable menu"
+                                                 options="[[realOptions]]"
+                                                 value="{{massiveSelectedValues}}"
+                                                 multi></etools-searchable-multiselection-menu>
+        </template>
+      </demo-snippet>
+
+
+      <h2>Multi selection, disabled</h2>
+
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-helper selected-values="{{selectedValues}}" real-options="{{realOptions}}"></demo-helper>
+          <etools-searchable-multiselection-menu label="Multiselection Searchable menu"
+                                                 options="[[realOptions]]"
+                                                 value="{{selectedValues}}"
+                                                 multi
+                                                 disabled></etools-searchable-multiselection-menu>
+        </template>
+      </demo-snippet>
+
+      <h2>Change event('value-change') examples</h2>
+
+      <demo-snippet>
+        <template is="dom-bind">
+          <demo-with-change-event></demo-with-change-event>
+        </template>
+      </demo-snippet>
+
+      <h2>Error messages and validations</h2>
+
+      <demo-snippet>
+        <template>
+          <demo-error-messages-and-validations></demo-error-messages-and-validations>
+        </template>
+      </demo-snippet>
+
 
       <h2>Custom objects as options. You can specify value and label properties from object option to be used.</h2>
 
@@ -141,13 +141,13 @@ <h2>Custom objects as options. You can specify value and label properties from o
         </template>
       </demo-snippet>
 
-      <!--<h2>Readonly state</h2>-->
+      <h2>Readonly state</h2>
 
-      <!--<demo-snippet>-->
-        <!--<template>-->
-          <!--<demo-readonly-state></demo-readonly-state>-->
-        <!--</template>-->
-      <!--</demo-snippet>-->
+      <demo-snippet>
+        <template>
+          <demo-readonly-state></demo-readonly-state>
+        </template>
+      </demo-snippet>
 
     </div>