@kws3/ui 1.2.1 → 1.2.2

package/forms/select/MultiSelect.svelte

@@ -244,6 +244,18 @@ Default value: `<span>{option[search_key] || option}</span>`
     throw new TypeError(`max must be null or positive integer, got ${max}`);
   }
 
+  //ensure we have a root container for all our hoisitng related stuff
+  let rootContainerId = "kws-overlay-root";
+  let rootContainer = document.getElementById(rootContainerId);
+  if (!rootContainer) {
+    rootContainer = document.createElement("div");
+    rootContainer.id = rootContainerId;
+    document.body.appendChild(rootContainer);
+  }
+
+  //this is the container that will hold the dropdown
+  let container;
+
   const fire = createEventDispatcher();
 
   let el, //whole wrapping element
@@ -372,9 +384,25 @@ Default value: `<span>{option[search_key] || option}</span>`
     POPPER && POPPER.update();
   }
 
+  /**
+   * Moves dropdown to rootContainer, so that
+   * overflows etc do not mess with it
+   */
+  function hoistDropdown() {
+    if (!container) {
+      container = document.createElement("div");
+      container.className = "searchableselect";
+      rootContainer.appendChild(container);
+      container.appendChild(dropdown);
+    }
+  }
+
   onMount(() => {
+    hoistDropdown();
+
     POPPER = createPopper(el, dropdown, {
       strategy: "fixed",
+      placement: "bottom-start",
       modifiers: [sameWidthPopperModifier],
     });
 
@@ -386,6 +414,10 @@ Default value: `<span>{option[search_key] || option}</span>`
 
     return () => {
       POPPER.destroy();
+      //remove hoisted items
+      container &&
+        container.parentNode &&
+        container.parentNode.removeChild(container);
     };
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -27,5 +27,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "d3a9a7b4eb2eb4ed8bb8f62bc2f8bc1ec598cd9f"
+  "gitHead": "1f87ee1cde62bfc3f4fd94e41c3141dd9eec688c"
 }

package/styles/Panel.scss

@@ -61,7 +61,6 @@ $kws-panel-caret-closed-color: #00a4d8 !default;
 
   &.collapsible .panel-content-outer {
     transition: max-height 0.3s;
-    transform: translate3d(0, 0, 0);
 
     max-height: 5000px;
     overflow: hidden;