Merge pull request #8301 from Budibase/fix/clicking-the-toggle-button-of-an-open-action-menu-does-not-close-it

Clicking the Toggle Button of an Open Action Menu Does Not Close It

packages/bbui/src/Actions/click_outside.js

@@ -1,18 +1,18 @@
 export default function clickOutside(element, callbackFunction) {
   function onClick(event) {
     if (!element.contains(event.target)) {
-      callbackFunction()
+      callbackFunction(event)
     }
   }
 
-  document.body.addEventListener("mousedown", onClick, true)
+  document.body.addEventListener("click", onClick, true)
 
   return {
     update(newCallbackFunction) {
       callbackFunction = newCallbackFunction
     },
     destroy() {
-      document.body.removeEventListener("mousedown", onClick, true)
+      document.body.removeEventListener("click", onClick, true)
     },
   }
 }

packages/bbui/src/Popover/Popover.svelte

@@ -33,6 +33,13 @@
     open = false
   }
 
+  const handleOutsideClick = e => {
+    if (open) {
+      e.stopPropagation()
+      hide()
+    }
+  }
+
   let open = null
 
   function handleEscape(e) {
@@ -47,7 +54,7 @@
     <div
       tabindex="0"
       use:positionDropdown={{ anchor, align, maxWidth }}
-      use:clickOutside={hide}
+      use:clickOutside={handleOutsideClick}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"