From 1acb04a46763756d6e74a5936ba3ba5316b02d49 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 29 Jun 2020 15:32:37 +0100
Subject: [PATCH] Only mount portal on open

---
 .../userInterface/OptionSelect.svelte         | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index df987af0c3..26f061cb58 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -27,13 +27,10 @@
   onMount(() => {
     if (select) {
       select.addEventListener("keydown", handleEnter)
-      selectMenu.addEventListener("keydown", handleEscape)
     }
 
-
     return () => {
       select.removeEventListener("keydown", handleEnter)
-      selectMenu.removeEventListener("keydown", handleEscape)
     }
 
   })
@@ -72,12 +69,11 @@
   function toggleSelect(isOpen) {
     getDimensions()
     if (isOpen) {
-      icon.style.transform = "rotate(180deg)"
-      selectMenu.focus()
+      icon.style.transform = "rotate(180deg)"      
     } else {
       icon.style.transform = "rotate(0deg)"
     }
-    open = isOpen    
+    open = isOpen
   }
 
 
@@ -99,6 +95,10 @@
     ? options.find(o => o.value === value)
     : {}
 
+  $: if(open && selectMenu) {
+    selectMenu.focus()
+  }
+
   $: displayLabel =
     selectedOption && selectedOption.label ? selectedOption.label : value || ""
 </script>
@@ -112,13 +112,15 @@
     <span>{displayLabel}</span>
     <i bind:this={icon} class="ri-arrow-down-s-fill" />
   </div>
+  {#if open}
   <Portal>
     <div
       tabindex="0"
+      class:open
       bind:this={selectMenu}
       style={menuStyle}
-      class="bb-select-menu"
-      class:open>
+      on:keydown={handleEscape}
+      class="bb-select-menu">
       <ul>
         {#if isOptionsObject}
           {#each options as { value: v, label }}
@@ -141,11 +143,10 @@
         {/if}
       </ul>
     </div>
+   <div on:click|self={() => toggleSelect(false)} class="overlay" />
   </Portal>
+  {/if}
 </div>
-{#if open}
-  <div on:click|self={() => toggleSelect(false)} class="overlay" />
-{/if}
 
 <style>
   .overlay {