Merge pull request #112 from unicef-polymer/dropdown-in-modal

Dropdown in modal issues

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:

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>

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": {
@@ -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.7"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

demo/demo-in-modal.html

@@ -0,0 +1,59 @@
+<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" no-auto-focus="[[isIEBrowser()]]">
+        <h4>Single selection</h4>
+       <etools-single-selection-menu options="[[realOptions]]" disable-on-focus-handling></etools-single-selection-menu>
+
+        <h4>Multi selection</h4>
+        <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>
+    </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;
+        },
+        isIEBrowser: function() {
+          let userAgent = window.navigator.userAgent;
+          if (userAgent.indexOf('Trident/') > -1) {
+            // IE 11
+            return true;
+          }
+          return false;
+        }
+      });
+
+    })();
+  </script>
+</dom-module>

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> Dropdown in etools-dialog</h2>
+      <demo-snippet>
+        <template>
+        <demo-in-modal></demo-in-modal>
+        </template>
+      </demo-snippet>
+
     </div>
 
   </body>

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">
 

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) {