I am utilizing a Svelte Selection component to fetch and display data in a dropdown. Users have the ability to select different properties, which is functioning correctly. However, I am encountering an issue when attempting to preselect certain options despite trying various methods.
{#if properties.length > 0 && selectedProperties.length > 0}
<div class="pb-16">
<label for="propertyDropdown">Select Company Properties:</label>
<select id="propertyDropdown" bind:value={selectedProperties} on:change={handlePropertySelection}
class="styled-dropdown"
multiple>
{#each properties as {name, label}}
<option title={name} value={name}>{label}</option>
{/each}
</select>
</div>
{/if}
To prefill the selection with the method onMount, I set the selectedProperties:
let selectedProperties: string[];
...
const handleCodeReceived = async function (code: string) {
try {
accessToken = await handleAuthentication(code) ?? "";
if (accessToken) {
properties = await fetchCompanyProperties(accessToken);
const selectedOptions = Array.from(properties.filter((property) => !property.hidden).map((option) => option.name));
selectedProperties = selectedOptions;
}
} catch (error: any) {
errorMessage = error.message;
}
};
It is worth noting that manual selection works as expected, and when manually selecting one element, the preselected elements are automatically also selected. This indicates that the selectedProperties array contains the correct data, suggesting a potential issue with the Svelte UI state. Any assistance on this matter would be highly appreciated.
const handlePropertySelection = (event: Event) => {
const selectElement = event.target as HTMLSelectElement;
const selectedOptions = Array.from(selectElement.selectedOptions).map((option) => option.value);
selectedProperties = selectedOptions;
};
I