From 516d163ea2f6683f7dc629e2e1f5f3c18f615313 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Tue, 10 May 2022 13:16:21 +0100
Subject: [PATCH] Close picker on click of listbox

---
 packages/bbui/src/Form/Core/Picker.svelte | 187 +++++++++++-----------
 1 file changed, 94 insertions(+), 93 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 143536a60a..2585f11939 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -43,7 +43,7 @@
       return
     }
     searchTerm = null
-    open = true
+    open = !open
   }
 
   const getSortedOptions = (options, getLabel, sort) => {
@@ -71,105 +71,73 @@
   }
 </script>
 
-<button
-  {id}
-  class="spectrum-Picker spectrum-Picker--sizeM"
-  class:spectrum-Picker--quiet={quiet}
-  {disabled}
-  class:is-invalid={!!error}
-  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" />
-    </span>
-  {/if}
-
-  <span
-    class="spectrum-Picker-label"
-    class:is-placeholder={isPlaceholder}
-    class:auto-width={autoWidth}
+<div use:clickOutside={() => (open = false)}>
+  <button
+    {id}
+    class="spectrum-Picker spectrum-Picker--sizeM"
+    class:spectrum-Picker--quiet={quiet}
+    {disabled}
+    class:is-invalid={!!error}
+    class:is-open={open}
+    aria-haspopup="listbox"
+    on:mousedown={onClick}
   >
-    {fieldText}
-  </span>
-  {#if error}
+    {#if fieldIcon}
+      <span class="icon-Placeholder-Padding">
+        <img src={fieldIcon} alt="icon" width="20" height="15" />
+      </span>
+    {/if}
+
+    <span
+      class="spectrum-Picker-label"
+      class:is-placeholder={isPlaceholder}
+      class:auto-width={autoWidth}
+    >
+      {fieldText}
+    </span>
+    {#if error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
     <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
       focusable="false"
       aria-hidden="true"
-      aria-label="Folder"
     >
-      <use xlink:href="#spectrum-icon-18-Alert" />
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
-  {/if}
-  <svg
-    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
-    focusable="false"
-    aria-hidden="true"
-  >
-    <use xlink:href="#spectrum-css-icon-Chevron100" />
-  </svg>
-</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}
-  >
-    {#if autocomplete}
-      <Search
-        value={searchTerm}
-        on:change={event => (searchTerm = event.detail)}
-        {disabled}
-        placeholder="Search"
-      />
-    {/if}
-    <ul class="spectrum-Menu" role="listbox">
-      {#if placeholderOption}
-        <li
-          class="spectrum-Menu-item placeholder"
-          class:is-selected={isPlaceholder}
-          role="option"
-          aria-selected="true"
-          tabindex="0"
-          on:click={() => onSelectOption(null)}
-        >
-          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-css-icon-Checkmark100" />
-          </svg>
-        </li>
+  </button>
+  {#if open}
+    <div
+      transition:fly|local={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+      class:auto-width={autoWidth}
+    >
+      {#if autocomplete}
+        <Search
+          value={searchTerm}
+          on:change={event => (searchTerm = event.detail)}
+          {disabled}
+          placeholder="Search"
+        />
       {/if}
-      {#if filteredOptions.length}
-        {#each filteredOptions as option, idx}
+      <ul class="spectrum-Menu" role="listbox">
+        {#if placeholderOption}
           <li
-            class="spectrum-Menu-item"
-            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+            class="spectrum-Menu-item placeholder"
+            class:is-selected={isPlaceholder}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(getOptionValue(option, idx))}
+            on:click={() => onSelectOption(null)}
           >
-            {#if getOptionIcon(option, idx)}
-              <span class="icon-Padding">
-                <img
-                  src={getOptionIcon(option, idx)}
-                  alt="icon"
-                  width="20"
-                  height="15"
-                />
-              </span>
-            {/if}
-            <span class="spectrum-Menu-itemLabel">
-              {getOptionLabel(option, idx)}
-            </span>
+            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -178,11 +146,44 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/each}
-      {/if}
-    </ul>
-  </div>
-{/if}
+        {/if}
+        {#if filteredOptions.length}
+          {#each filteredOptions as option, idx}
+            <li
+              class="spectrum-Menu-item"
+              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+              role="option"
+              aria-selected="true"
+              tabindex="0"
+              on:click={() => onSelectOption(getOptionValue(option, idx))}
+            >
+              {#if getOptionIcon(option, idx)}
+                <span class="icon-Padding">
+                  <img
+                    src={getOptionIcon(option, idx)}
+                    alt="icon"
+                    width="20"
+                    height="15"
+                  />
+                </span>
+              {/if}
+              <span class="spectrum-Menu-itemLabel">
+                {getOptionLabel(option, idx)}
+              </span>
+              <svg
+                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+                focusable="false"
+                aria-hidden="true"
+              >
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
+              </svg>
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </div>
+  {/if}
+</div>
 
 <style>
   .spectrum-Popover {