From 638e7afcc6d9815fa2b2a536a3990f9b42a54efa Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Sat, 27 Jun 2020 16:56:01 +0100
Subject: [PATCH 1/3] WIP: Select Scroll - Problems on scroll

---
 packages/builder/package.json                 |   1 +
 .../userInterface/DesignView.svelte           |  13 +-
 .../userInterface/OptionSelect.svelte         | 113 +++++++++++-------
 3 files changed, 80 insertions(+), 47 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index dd449b2256..7fe768be6b 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -70,6 +70,7 @@
     "safe-buffer": "^5.1.2",
     "shortid": "^2.2.8",
     "string_decoder": "^1.2.0",
+    "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
     "uikit": "^3.1.7"
   },
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 7bca352bd1..5cc65ec214 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,16 +1,27 @@
 <script>
+  import {onMount} from "svelte"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
+
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
 
   let selectedCategory = "normal"
+  let propGroup = null
 
   const getProperties = name => panelDefinition[name]
 
+  onMount(() => {
+    // if(propGroup) {
+    //   propGroup.addEventListener("scroll", function(e){
+    //     console.log("I SCROLLED", e.target.scrollTop)
+    //   })
+    // }
+  })
+
   function onChange(category) {
     selectedCategory = category
   }
@@ -31,7 +42,7 @@
   </div>
 
   <div class="positioned-wrapper">
-    <div class="design-view-property-groups">
+    <div bind:this={propGroup} class="design-view-property-groups">
       {#if propertyGroupNames.length > 0}
         {#each propertyGroupNames as groupName}
           <PropertyGroup
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 1c85a06392..202cd10a19 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { onMount, beforeUpdate } from "svelte"
+  import { onMount, beforeUpdate, afterUpdate } from "svelte"
+  import Portal from "svelte-portal"
   import { buildStyle } from "../../helpers.js"
   export let options = []
   export let value = ""
@@ -12,12 +13,13 @@
   let selectMenu
   let icon
 
-  let selectYPosition = null
-  let availableSpace = 0
+  let selectAnchor = null;
+  let dimensions = {top: 0, bottom: 0, left: 0}
 
   let positionSide = "top"
-  let maxHeight = null
-  let menuHeight
+  let maxHeight = 0
+  let scrollTop = 0;
+  let containerEl = null;
 
   const handleStyleBind = value =>
     !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
@@ -26,22 +28,37 @@
     if (select) {
       select.addEventListener("keydown", addSelectKeyEvents)
     }
+
+    containerEl = document.querySelector(".design-view-property-groups")
+
     return () => {
       select.removeEventListener("keydown", addSelectKeyEvents)
+      containerEl.removeEventListener("scroll", disableScroll)
     }
+
   })
 
-  function checkPosition() {
-    const { bottom, top: spaceAbove } = select.getBoundingClientRect()
+  function disableScroll(e) {
+    containerEl.scrollTop = scrollTop 
+  }
+
+  function getDimensions() {
+    const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
     const spaceBelow = window.innerHeight - bottom
 
+    let y;
+
     if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
-      maxHeight = `${spaceAbove.toFixed(0) - 20}px`
+      maxHeight = spaceAbove - 20  
+      y = (window.innerHeight - spaceAbove)
     } else {
       positionSide = "top"
-      maxHeight = `${spaceBelow.toFixed(0) - 20}px`
+      y = bottom
+      maxHeight = spaceBelow - 20
     }
+
+    dimensions = {[positionSide]: y, left}
   }
 
   function addSelectKeyEvents(e) {
@@ -57,24 +74,30 @@
   }
 
   function toggleSelect(isOpen) {
-    checkPosition()
+    getDimensions()
     if (isOpen) {
       icon.style.transform = "rotate(180deg)"
+      let containerWidth = containerEl.offsetWidth
+      scrollTop = containerEl.scrollTop
+      containerEl.addEventListener("scroll", disableScroll)
     } else {
       icon.style.transform = "rotate(0deg)"
+      containerEl.removeEventListener("scroll", disableScroll)
     }
-    open = isOpen
+    open = isOpen    
   }
 
+
   function handleClick(val) {
     value = val
     onChange(value)
   }
 
   $: menuStyle = buildStyle({
-    "max-height": maxHeight,
+    "max-height": `${maxHeight.toFixed(0)}px`,
     "transform-origin": `center ${positionSide}`,
-    [positionSide]: "32px",
+    [positionSide]: `${dimensions[positionSide]}px`,
+    "left": `${dimensions.left.toFixed(0)}px`,
   })
 
   $: isOptionsObject = options.every(o => typeof o === "object")
@@ -92,37 +115,39 @@
   bind:this={select}
   class="bb-select-container"
   on:click={() => toggleSelect(!open)}>
-  <div class="bb-select-anchor selected">
+  <div bind:this={selectAnchor} class="bb-select-anchor selected">
     <span>{displayLabel}</span>
     <i bind:this={icon} class="ri-arrow-down-s-fill" />
   </div>
-  <div
-    bind:this={selectMenu}
-    style={menuStyle}
-    class="bb-select-menu"
-    class:open>
-    <ul>
-      {#if isOptionsObject}
-        {#each options as { value: v, label }}
-          <li
-            {...handleStyleBind(v)}
-            on:click|self={handleClick(v)}
-            class:selected={value === v}>
-            {label}
-          </li>
-        {/each}
-      {:else}
-        {#each options as v}
-          <li
-            {...handleStyleBind(v)}
-            on:click|self={handleClick(v)}
-            class:selected={value === v}>
-            {v}
-          </li>
-        {/each}
-      {/if}
-    </ul>
-  </div>
+  <Portal>
+    <div
+      bind:this={selectMenu}
+      style={menuStyle}
+      class="bb-select-menu"
+      class:open>
+      <ul>
+        {#if isOptionsObject}
+          {#each options as { value: v, label }}
+            <li
+              {...handleStyleBind(v)}
+              on:click|self={handleClick(v)}
+              class:selected={value === v}>
+              {label}
+            </li>
+          {/each}
+        {:else}
+          {#each options as v}
+            <li
+              {...handleStyleBind(v)}
+              on:click|self={handleClick(v)}
+              class:selected={value === v}>
+              {v}
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </div>
+  </Portal>
 </div>
 {#if open}
   <div on:click|self={() => toggleSelect(false)} class="overlay" />
@@ -130,7 +155,7 @@
 
 <style>
   .overlay {
-    position: absolute;
+    position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
@@ -139,7 +164,6 @@
   }
 
   .bb-select-container {
-    position: relative;
     outline: none;
     width: 160px;
     height: 36px;
@@ -190,9 +214,6 @@
     height: fit-content !important;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
-    border-right: 1px solid var(--grey-4);
-    border-left: 1px solid var(--grey-4);
-    border-bottom: 1px solid var(--grey-4);
     background-color: var(--grey-2);
     transform: scale(0);
     transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);

From e66f8c8ca4c81623d5dc166305d6281fdc273c09 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 29 Jun 2020 13:38:08 +0100
Subject: [PATCH 2/3] Focus menu on open and key events

---
 .../userInterface/OptionSelect.svelte         | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 202cd10a19..df987af0c3 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -26,20 +26,22 @@
 
   onMount(() => {
     if (select) {
-      select.addEventListener("keydown", addSelectKeyEvents)
+      select.addEventListener("keydown", handleEnter)
+      selectMenu.addEventListener("keydown", handleEscape)
     }
 
-    containerEl = document.querySelector(".design-view-property-groups")
 
     return () => {
-      select.removeEventListener("keydown", addSelectKeyEvents)
-      containerEl.removeEventListener("scroll", disableScroll)
+      select.removeEventListener("keydown", handleEnter)
+      selectMenu.removeEventListener("keydown", handleEscape)
     }
 
   })
 
-  function disableScroll(e) {
-    containerEl.scrollTop = scrollTop 
+  function handleEscape(e) {
+    if(open && e.key === "Escape") {
+        toggleSelect(false)
+    }
   }
 
   function getDimensions() {
@@ -61,28 +63,19 @@
     dimensions = {[positionSide]: y, left}
   }
 
-  function addSelectKeyEvents(e) {
-    if (e.key === "Enter") {
-      if (!open) {
+  function handleEnter(e) {
+    if (!open && e.key === "Enter") {
         toggleSelect(true)
-      }
-    } else if (e.key === "Escape") {
-      if (open) {
-        toggleSelect(false)
-      }
-    }
+    } 
   }
 
   function toggleSelect(isOpen) {
     getDimensions()
     if (isOpen) {
       icon.style.transform = "rotate(180deg)"
-      let containerWidth = containerEl.offsetWidth
-      scrollTop = containerEl.scrollTop
-      containerEl.addEventListener("scroll", disableScroll)
+      selectMenu.focus()
     } else {
       icon.style.transform = "rotate(0deg)"
-      containerEl.removeEventListener("scroll", disableScroll)
     }
     open = isOpen    
   }
@@ -121,6 +114,7 @@
   </div>
   <Portal>
     <div
+      tabindex="0"
       bind:this={selectMenu}
       style={menuStyle}
       class="bb-select-menu"
@@ -204,6 +198,7 @@
   .bb-select-menu {
     position: absolute;
     display: flex;
+    outline: none;
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;

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 3/3] 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 {