Merge pull request #8355 from Budibase/fix/fix-pickers-interaction-with-outside-click-handler-action

Fix Picker Interaction with the Outside Click Action

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -119,6 +119,13 @@
 
     return "var(--spectrum-global-color-static-gray-900)"
   }
+
+  const handleOutsideClick = event => {
+    if (open) {
+      event.stopPropagation()
+      open = false
+    }
+  }
 </script>
 
 <div class="container">
@@ -131,7 +138,7 @@
   </div>
   {#if open}
     <div
-      use:clickOutside={() => (open = false)}
+      use:clickOutside={handleOutsideClick}
       transition:fly={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
       class:spectrum-Popover--align-right={alignRight}

packages/bbui/src/Form/Core/Picker.svelte

@@ -85,7 +85,7 @@
     class:is-invalid={!!error}
     class:is-open={open}
     aria-haspopup="listbox"
-    on:mousedown={onClick}
+    on:click={onClick}
   >
     {#if fieldIcon}
       <span class="option-extra">

packages/bbui/src/Form/Core/PickerDropdown.svelte

@@ -87,6 +87,20 @@
       updateValue(event.target.value)
     }
   }
+
+  const handlePrimaryOutsideClick = event => {
+    if (primaryOpen) {
+      event.stopPropagation()
+      primaryOpen = false
+    }
+  }
+
+  const handleSecondaryOutsideClick = event => {
+    if (secondaryOpen) {
+      event.stopPropagation()
+      secondaryOpen = false
+    }
+  }
 </script>
 
 <div
@@ -148,7 +162,7 @@
   </div>
   {#if primaryOpen}
     <div
-      use:clickOutside={() => (primaryOpen = false)}
+      use:clickOutside={handlePrimaryOutsideClick}
       transition:fly|local={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
       class:auto-width={autoWidth}
@@ -256,7 +270,7 @@
         {disabled}
         class:is-open={secondaryOpen}
         aria-haspopup="listbox"
-        on:mousedown={onClickSecondary}
+        on:click={onClickSecondary}
       >
         {#if secondaryFieldIcon}
           <span class="option-left">
@@ -281,7 +295,7 @@
       </button>
       {#if secondaryOpen}
         <div
-          use:clickOutside={() => (secondaryOpen = false)}
+          use:clickOutside={handleSecondaryOutsideClick}
           transition:fly|local={{ y: -20, duration: 200 }}
           class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
           style="width: 30%"

packages/bbui/src/IconPicker/IconPicker.svelte

@@ -50,6 +50,13 @@
     dispatch("change", value)
     open = false
   }
+
+  const handleOutsideClick = event => {
+    if (open) {
+      event.stopPropagation()
+      open = false
+    }
+  }
 </script>
 
 <div class="container">
@@ -64,7 +71,7 @@
   </div>
   {#if open}
     <div
-      use:clickOutside={() => (open = false)}
+      use:clickOutside={handleOutsideClick}
       transition:fly={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
       class:spectrum-Popover--align-right={alignRight}