issue 1619: Remove 'blur' event on combobox

w3c · Jan 12, 2021 · a32a1a6 · a32a1a6
1 parent 4dcb7df
commit a32a1a6
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/examples/combobox/js/combobox-autocomplete.js b/examples/combobox/js/combobox-autocomplete.js
@@ -57,7 +57,12 @@ class ComboboxAutocomplete {
       'focus',
       this.onComboboxFocus.bind(this)
     );
-    this.comboboxNode.addEventListener('blur', this.onComboboxBlur.bind(this));
+
+    document.body.addEventListener(
+      'mouseup',
+      this.onBackgroundMouseUp.bind(this),
+      true
+    );
 
     // initialize pop up menu
 
@@ -507,11 +512,16 @@ class ComboboxAutocomplete {
     this.setCurrentOptionStyle(null);
   }
 
-  onComboboxBlur() {
-    this.comboboxHasVisualFocus = false;
-    this.setCurrentOptionStyle(null);
-    this.removeVisualFocusAll();
-    setTimeout(this.close.bind(this, false), 300);
+  onBackgroundMouseUp(event) {
+    if (
+      !this.comboboxNode.contains(event.target) &&
+      !this.listboxNode.contains(event.target)
+    ) {
+      this.comboboxHasVisualFocus = false;
+      this.setCurrentOptionStyle(null);
+      this.removeVisualFocusAll();
+      setTimeout(this.close.bind(this, true), 300);
+    }
   }
 
   onButtonClick() {
@@ -564,6 +574,5 @@ window.addEventListener('load', function () {
     var buttonNode = combobox.querySelector('button');
     var listboxNode = combobox.querySelector('[role="listbox"]');
     var cba = new ComboboxAutocomplete(comboboxNode, buttonNode, listboxNode);
-    cba.init();
   }
 });