Issue 5868 - Allow clicking outside CustomSelect to close in help.eyeo.com

static/js/main.js

Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -33,17 +33,42 @@
     /**************************************************************************
      * CustomSelect
      **************************************************************************/
 
     function CustomSelect(select)
     {
       this.select = select;
       this.close();
-      select.addEventListener("click", this._onClick.bind(this), false);
+      this.select
+          .addEventListener("click", this._onClick.bind(this), false);
+      this.select
+          .addEventListener("focusout", this._onFocusOut.bind(this), false);
+    }
+
+    CustomSelect.prototype._onFocusOut = function()
+    {
+      // setTimeout to allow document.activeElement 
+      // to move to newly focused element
+      setTimeout(function()
+      {
+        var newFocus = document.activeElement;
+
+        if (newFocus

[juliandoucette, 2017/10/24 10:15:25]

Suggest:

{{{
var classList = document.activeElement.classList;

return classList.contains("custom-select-selected") ||
  classList.contains("custom-select-option") ||
  this.close();
}}}

[ire, 2017/10/24 14:51:09]

This particular way doesn't work because I'm not only checking for the
activeElement's class. Also checking for the parentElement of the activeElement.

+              .classList.contains("custom-select-selected") ||
+            newFocus
+              .parentElement
+              .classList.contains("custom-select-option"))
+        {
+          return;
+        }
+
+        this.close();
+        
+      }.bind(this), 1);
     }
 
     CustomSelect.prototype._onClick = function(event)
     {
       if (event.target.classList.contains("custom-select-selected"))
       {
         var options = this.select.querySelector(".custom-select-options");
         if (options.getAttribute("aria-hidden") == "true")