Close picker on click of listbox

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

@@ -43,7 +43,7 @@
       return
     }
     searchTerm = null
-    open = true
+    open = !open
   }
 
   const getSortedOptions = (options, getLabel, sort) => {
@@ -71,7 +71,8 @@
   }
 </script>
 
-<button
+<div use:clickOutside={() => (open = false)}>
+  <button
     {id}
     class="spectrum-Picker spectrum-Picker--sizeM"
     class:spectrum-Picker--quiet={quiet}
@@ -80,7 +81,7 @@
     class:is-open={open}
     aria-haspopup="listbox"
     on:mousedown={onClick}
->
+  >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">
         <img src={fieldIcon} alt="icon" width="20" height="15" />
@@ -111,10 +112,9 @@
     >
       <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
-</button>
-{#if open}
+  </button>
+  {#if open}
     <div
-    use:clickOutside={() => (open = false)}
       transition:fly|local={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
       class:auto-width={autoWidth}
@@ -182,7 +182,8 @@
         {/if}
       </ul>
     </div>
-{/if}
+  {/if}
+</div>
 
 <style>
   .spectrum-Popover {