Merge pull request #397 from Budibase/bugfix/select-overflow-clipping

OptionSelect - Fix for Overflow Clipping

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"
   },

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

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,69 +13,80 @@
   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}` } : {}
 
   onMount(() => {
     if (select) {
-      select.addEventListener("keydown", addSelectKeyEvents)
+      select.addEventListener("keydown", handleEnter)
     }
+
     return () => {
-      select.removeEventListener("keydown", addSelectKeyEvents)
+      select.removeEventListener("keydown", handleEnter)
     }
+
   })
 
-  function checkPosition() {
-    const { bottom, top: spaceAbove } = select.getBoundingClientRect()
+  function handleEscape(e) {
+    if(open && e.key === "Escape") {
+        toggleSelect(false)
+    }
+  }
+
+  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) {
-    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) {
-    checkPosition()
+    getDimensions()
     if (isOpen) {
-      icon.style.transform = "rotate(180deg)"
+      icon.style.transform = "rotate(180deg)"      
     } else {
       icon.style.transform = "rotate(0deg)"
     }
     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")
@@ -83,6 +95,10 @@
     ? options.find(o => o.value === value)
     : {}
 
+  $: if(open && selectMenu) {
+    selectMenu.focus()
+  }
+
   $: displayLabel =
     selectedOption && selectedOption.label ? selectedOption.label : value || ""
 </script>
@@ -92,45 +108,49 @@
   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>
+  {#if open}
+  <Portal>
+    <div
+      tabindex="0"
+      class:open
+      bind:this={selectMenu}
+      style={menuStyle}
+      on:keydown={handleEscape}
+      class="bb-select-menu">
+      <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>
+   <div on:click|self={() => toggleSelect(false)} class="overlay" />
+  </Portal>
+  {/if}
 </div>
-{#if open}
-  <div on:click|self={() => toggleSelect(false)} class="overlay" />
-{/if}
 
 <style>
   .overlay {
-    position: absolute;
+    position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
@@ -139,7 +159,6 @@
   }
 
   .bb-select-container {
-    position: relative;
     outline: none;
     width: 160px;
     height: 36px;
@@ -180,6 +199,7 @@
   .bb-select-menu {
     position: absolute;
     display: flex;
+    outline: none;
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;
@@ -190,9 +210,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);