From dda3ab93cd899e6ef898a71ca1c91d7012cffb35 Mon Sep 17 00:00:00 2001
From: Adriana Trif <trif.corina.adriana@gmail.com>
Date: Fri, 20 Oct 2017 18:11:40 +0300
Subject: [PATCH 1/4] Added Demo page for dropdown in modal

---
 bower.json              |  3 ++-
 demo/demo-in-modal.html | 51 +++++++++++++++++++++++++++++++++++++++++
 demo/index.html         |  8 +++++++
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 demo/demo-in-modal.html

diff --git a/bower.json b/bower.json
index fc666e6..e9169e0 100644
--- a/bower.json
+++ b/bower.json
@@ -14,7 +14,8 @@
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.3",
     "etools-ajax": "^2.0.0",
-    "paper-menu": "PolymerElements/paper-menu#^1.3.0"
+    "paper-menu": "PolymerElements/paper-menu#^1.3.0",
+    "etools-dialog": "^1.2.6"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/demo/demo-in-modal.html b/demo/demo-in-modal.html
new file mode 100644
index 0000000..73d0604
--- /dev/null
+++ b/demo/demo-in-modal.html
@@ -0,0 +1,51 @@
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../etools-dialog/etools-dialog.html">
+<link rel="import" href="../etools-searchable-multiselection-menu.html">
+<link rel="import" href="../etools-single-selection-menu.html">
+<link rel="import" href="../etools-multi-selection-menu.html">
+
+<dom-module id="demo-in-modal">
+  <template>
+    <style>
+    </style>
+    <button on-click="openDialog">Open Etools Dialog</button>
+    <etools-dialog id="etoolsDialog">
+        <h4>Single selection</h4>
+       <etools-single-selection-menu options="[[realOptions]]"></etools-single-selection-menu>
+
+        <h4>Multi selection</h4>
+        <etools-multi-selection-menu options="[[realOptions]]"></etools-multi-selection-menu>
+
+        <h4>Old esmm versions</h4>
+        <etools-searchable-multiselection-menu options="[[realOptions]]"></etools-searchable-multiselection-menu>
+    </etools-dialog>
+  </template>
+  <script>
+    (function() {
+      // jscs:disable
+      'use strict';
+
+      Polymer({
+        is: 'demo-in-modal',
+
+        properties: {
+          realOptions: {
+            type: Array,
+            value: function() {
+              var opt = [];
+              for(var i = 1; i <= 25; i++) {
+                opt.push({value: i, label: 'Option ' + i});
+              }
+              return opt;
+            },
+            notify: true
+          },
+        },
+        openDialog: function() {
+          this.$.etoolsDialog.opened = true;
+        }
+      });
+
+    })();
+  </script>
+</dom-module>
diff --git a/demo/index.html b/demo/index.html
index 36e67d4..076f578 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -21,6 +21,7 @@
     <link rel="import" href="demo-single-selection-menu.html">
     <link rel="import" href="demo-multi-selection-menu.html">
     <link rel="import" href="demo-readonly-state.html">
+    <link rel="import" href="demo-in-modal.html">
 
     <style is="custom-style" include="demo-pages-shared-styles">
       .vertical-section-container {
@@ -97,6 +98,13 @@ <h2> ReadOnly and Starred state </h2>
         </template>
       </demo-snippet>
 
+      <h2> Dropdon in etools-dialog</h2>
+      <demo-snippet>
+        <template>
+        <demo-in-modal></demo-in-modal>
+        </template>
+      </demo-snippet>
+
     </div>
 
   </body>

From 1f29daf449d583c2e3f657bcd330a666b6e1c899 Mon Sep 17 00:00:00 2001
From: Adriana Trif <trif.corina.adriana@gmail.com>
Date: Tue, 24 Oct 2017 15:11:06 +0300
Subject: [PATCH 2/4] Demo dropdown in modal

---
 bower.json              |  2 +-
 demo/demo-in-modal.html | 10 +++++++++-
 demo/index.html         |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/bower.json b/bower.json
index e9169e0..e73638e 100644
--- a/bower.json
+++ b/bower.json
@@ -15,7 +15,7 @@
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.3",
     "etools-ajax": "^2.0.0",
     "paper-menu": "PolymerElements/paper-menu#^1.3.0",
-    "etools-dialog": "^1.2.6"
+    "etools-dialog": "^1.2.7"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/demo/demo-in-modal.html b/demo/demo-in-modal.html
index 73d0604..94270d5 100644
--- a/demo/demo-in-modal.html
+++ b/demo/demo-in-modal.html
@@ -9,7 +9,7 @@
     <style>
     </style>
     <button on-click="openDialog">Open Etools Dialog</button>
-    <etools-dialog id="etoolsDialog">
+    <etools-dialog id="etoolsDialog" no-auto-focus="[[isIEBrowser()]]">
         <h4>Single selection</h4>
        <etools-single-selection-menu options="[[realOptions]]"></etools-single-selection-menu>
 
@@ -43,6 +43,14 @@ <h4>Old esmm versions</h4>
         },
         openDialog: function() {
           this.$.etoolsDialog.opened = true;
+        },
+        isIEBrowser: function() {
+          let userAgent = window.navigator.userAgent;
+          if (userAgent.indexOf('Trident/') > -1) {
+            // IE 11
+            return true;
+          }
+          return false;
         }
       });
 
diff --git a/demo/index.html b/demo/index.html
index 076f578..08c7e52 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -98,7 +98,7 @@ <h2> ReadOnly and Starred state </h2>
         </template>
       </demo-snippet>
 
-      <h2> Dropdon in etools-dialog</h2>
+      <h2> Dropdown in etools-dialog</h2>
       <demo-snippet>
         <template>
         <demo-in-modal></demo-in-modal>

From 848ae7ed9bf1c5ae44008b922c25f14e96bba94b Mon Sep 17 00:00:00 2001
From: Adriana Trif <trif.corina.adriana@gmail.com>
Date: Mon, 30 Oct 2017 15:39:39 +0200
Subject: [PATCH 3/4] Add flagg to disableOnFocusHandling on
 paper-input-container

---
 README.md                         |  1 +
 behaviors/common-behavior.html    | 13 ++++++++++++-
 bower.json                        |  2 +-
 etools-multi-selection-menu.html  |  2 +-
 etools-single-selection-menu.html |  3 ++-
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index a70ae59..cef4d90 100644
--- a/README.md
+++ b/README.md
@@ -240,6 +240,7 @@ dropdown options have.
 * value - String
 * avoidHeaderOverlappingDropdown - Boolean , default: false . This was added for a case in pmp, where when the dropdown
 oppened upwards, the search input was covered by the header of the app
+* disableOnFocusHandling - Boolean, default: false. Set to true to disable onFocus handling on the dropdown (more specifically the contained paper-input-container). We set this to true when the dropdown is in a modal, to avoid a bug that consists of the dropdown overlay closing and opening again and remaining opened , when clicking outside the dropdown or after selecting an item
 ## Usage
 
 Examples:
diff --git a/behaviors/common-behavior.html b/behaviors/common-behavior.html
index eaebbeb..0212fa9 100644
--- a/behaviors/common-behavior.html
+++ b/behaviors/common-behavior.html
@@ -115,6 +115,11 @@
       _resizedManually: {
         type: Boolean,
         value: false
+      },
+      disableOnFocusHandling: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
       }
     },
     listeners: {
@@ -271,7 +276,13 @@
       var ddContent = this._getDropdownContent();
       ddContent.style.height = 'auto';
       this.notifyDropdownResize();
-    }
+    },
+    _onFocusInputContainer: function() {
+      if (this.disableOnFocusHandling) {
+        return;
+      }
+      this._openMenu();
+    },
 
   };
 </script>
diff --git a/bower.json b/bower.json
index acb9b3d..c68f723 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": "2.2.8",
+  "version": "2.2.9",
   "license": "https://github.com/unicef-polymer/etools-searchable-multiselection-menu/blob/master/LICENSE.md",
   "main": "etools-searchable-multiselection-menu.html",
   "dependencies": {
diff --git a/etools-multi-selection-menu.html b/etools-multi-selection-menu.html
index 1c1006d..612cbc0 100644
--- a/etools-multi-selection-menu.html
+++ b/etools-multi-selection-menu.html
@@ -92,7 +92,7 @@
                            invalid$="[[invalid]]"
                            required$="[[required]]"
                            attr-for-value="selected-values"
-                           on-focus="_openMenu"
+                           on-focus="_onFocusInputContainer"
                            on-tap="_handleClickOrTap"
                            on-click="_handleClickOrTap">
 
diff --git a/etools-single-selection-menu.html b/etools-single-selection-menu.html
index 7f0c8c3..4dc6dbf 100644
--- a/etools-single-selection-menu.html
+++ b/etools-single-selection-menu.html
@@ -54,7 +54,7 @@
                            disabled$="[[disabled]]"
                            invalid$="[[invalid]]"
                            no-label-float="[[noLabelFloat]]"
-                           on-focus="_openMenu"
+                           on-focus="_onFocusInputContainer"
                            on-tap="_handleClickOrTap"
                            on-click="_handleClickOrTap">
 
@@ -197,6 +197,7 @@
         e.stopImmediatePropagation();
         this._openMenu(e);
       },
+
       _openMenu: function(e) {
         var dropdown = this.$.dropdownMenu;
         if (!dropdown.opened) {

From f86325916e8d70229352feb2149fed3dd63d8078 Mon Sep 17 00:00:00 2001
From: Adriana Trif <trif.corina.adriana@gmail.com>
Date: Mon, 30 Oct 2017 15:46:16 +0200
Subject: [PATCH 4/4] Update demo dropdown-in-modal

---
 demo/demo-in-modal.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/demo-in-modal.html b/demo/demo-in-modal.html
index 94270d5..376695c 100644
--- a/demo/demo-in-modal.html
+++ b/demo/demo-in-modal.html
@@ -11,10 +11,10 @@
     <button on-click="openDialog">Open Etools Dialog</button>
     <etools-dialog id="etoolsDialog" no-auto-focus="[[isIEBrowser()]]">
         <h4>Single selection</h4>
-       <etools-single-selection-menu options="[[realOptions]]"></etools-single-selection-menu>
+       <etools-single-selection-menu options="[[realOptions]]" disable-on-focus-handling></etools-single-selection-menu>
 
         <h4>Multi selection</h4>
-        <etools-multi-selection-menu options="[[realOptions]]"></etools-multi-selection-menu>
+        <etools-multi-selection-menu options="[[realOptions]]" disable-on-focus-handling></etools-multi-selection-menu>
 
         <h4>Old esmm versions</h4>
         <etools-searchable-multiselection-menu options="[[realOptions]]"></etools-searchable-multiselection-menu>