SandpointsEditPage/src/SpHasCandidates.svelte

<script>
 import { createEventDispatcher } from 'svelte';
 import { afterUpdate } from 'svelte';
 export let candidates;
 export let fmKeyType;
 export let fmKey;

 export let value;
 const dispatch = createEventDispatcher();

 afterUpdate(() => {
   let addnew = document.getElementById('addnew')
   if (addnew) {
     addnew.selected = 'selected';
   }
 });
 
 $: {
   dispatch("addToTiersRemoveFromCandidates", [value, fmKeyType, fmKey])
   value = 1;
 }
</script>

{#if candidates && candidates.length > 0}
<select class="selecttier" bind:value>
  <option id="addnew" value="1" disabled selected>Add new...</option>
  {#each candidates as tier (tier.file)}
    <option title="{tier.title}" value={tier.file}>{tier.file} {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(0, 68) + '…'}){/if}</option>
  {/each}
</select>
{/if}