From 767846e4c492858c89ea469deae5af81586c0099 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 10:37:28 +0100
Subject: [PATCH] Add selected styles to component dropdowns

---
 .../userInterface/ComponentSelectionList.svelte       | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 617b90edcc..59bf7548e1 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -12,7 +12,6 @@
   $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
 
   const close = () => {
-    selectedIndex = null
     popover.hide()
   }
 
@@ -38,14 +37,19 @@
     <div
       bind:this={anchors[idx]}
       class="category"
-      on:click={() => onCategoryChosen(category, idx)}>
+      on:click={() => onCategoryChosen(category, idx)}
+      class:active={idx === selectedIndex}>
       {#if category.icon}<i class={category.icon} />{/if}
       <span>{category.name}</span>
       {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
     </div>
   {/each}
 </div>
-<DropdownMenu bind:this={popover} {anchor} align="left">
+<DropdownMenu
+  on:close={() => (selectedIndex = null)}
+  bind:this={popover}
+  {anchor}
+  align="left">
   <Tab
     list={categories[selectedIndex]}
     on:selectItem={(e) => onComponentChosen(e.detail)} />
@@ -76,6 +80,7 @@
     font-weight: 500;
     user-select: none;
   }
+  .category.active,
   .category:hover {
     color: var(--ink);
   }