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

static/js/main.js

 (function(){
   document.addEventListener("DOMContentLoaded", function()
   {
 
     /**************************************************************************
      * General
      **************************************************************************/
 
     // Change html class name from "no-js" to "js"
     document.documentElement.className = "js";
@@ skipping 20 matching lines @@
     }
 
     /**************************************************************************
      * 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")
         {
           this.open();
@@ skipping 142 matching lines @@
     }
 
     var productTopicsAccordion = document.getElementById('product-topics-accordion');
     if (productTopicsAccordion)
     {
       new Accordion(productTopicsAccordion);
     }
 
   }, false);
 }());