From 1acb04a46763756d6e74a5936ba3ba5316b02d49 Mon Sep 17 00:00:00 2001 From: Conor_Mack 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 || "" @@ -112,13 +112,15 @@ {displayLabel} + {#if open}
+ on:keydown={handleEscape} + class="bb-select-menu">
    {#if isOptionsObject} {#each options as { value: v, label }} @@ -141,11 +143,10 @@ {/if}
+
toggleSelect(false)} class="overlay" /> + {/if}
-{#if open} -
toggleSelect(false)} class="overlay" /> -{/if}