workaround to strange onMount bug with many Tabs components

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-20 16:46:20 +02:00
parent 8bb8fdfb18
commit 302e001eb5
1 changed files with 24 additions and 17 deletions

View File

@ -1,4 +1,5 @@
<script> <script>
import { onMount } from "svelte"
import { import {
Button, Button,
Detail, Detail,
@ -19,6 +20,7 @@
export let template export let template
let htmlEditor let htmlEditor
let mounted = false
$: selectedTemplate = $email?.templates?.find( $: selectedTemplate = $email?.templates?.find(
({ purpose }) => purpose === template ({ purpose }) => purpose === template
@ -39,6 +41,9 @@
function setTemplateBinding(binding) { function setTemplateBinding(binding) {
htmlEditor.update((selectedTemplate.contents += `{{ ${binding.name} }}`)) htmlEditor.update((selectedTemplate.contents += `{{ ${binding.name} }}`))
} }
onMount(() => {
mounted = true
})
</script> </script>
<Page wide> <Page wide>
@ -78,6 +83,7 @@
/> />
<div class="bindings-editor"> <div class="bindings-editor">
<Detail size="L">Bindings</Detail> <Detail size="L">Bindings</Detail>
{#if mounted}
<Tabs selected="Template"> <Tabs selected="Template">
<Tab title="Template"> <Tab title="Template">
<TemplateBindings <TemplateBindings
@ -94,6 +100,7 @@
/> />
</Tab> </Tab>
</Tabs> </Tabs>
{/if}
</div> </div>
</div></Tab </div></Tab
> >
@ -108,7 +115,7 @@
<style> <style>
.template-editor { .template-editor {
display: grid; display: grid;
grid-template-columns: 1fr 20%; grid-template-columns: 1fr minmax(250px, 20%);
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }