svelte-select
svelte-select copied to clipboard
Creatable select not stable
trafficstars
This is a creatable select. I am also using superforms and need to extract an array with the values of the select. To do so, I bind the parameter myFields to justValue.
However, when deleting items (more specific, the last element that I've selected) from the list, it svelte-select throws an exception.
Uncaught (in promise) TypeError: parent is null
Here is the code for replication:
<script lang="ts">
import Select from 'svelte-select';
let filterText = '';
let value: { value: number | string; label: string; created?: boolean }[] = [];
export let items: { value: number | string; label: string; created?: boolean }[] = [];
export let myFields: string[] = [];
function handleFilter(e: { detail: string[] }) {
if (value?.find((i) => i.label === filterText)) return;
if (e.detail.length === 0 && filterText.length > 0) {
const prev = items.filter((i) => !i.created);
items = [...prev, { value: filterText, label: filterText, created: true }];
}
}
function handleChange(e: any) {
items = items.map((i) => {
delete i.created;
return i;
});
}
</script>
<Select
on:change={handleChange}
multiple
on:filter={handleFilter}
bind:filterText
bind:value
bind:justValue={myFields}
bind:items
>
<div slot="item" let:item>
{item.created ? 'Add new: ' : ''}
{item.label}
</div>
</Select>
Full error log
ncaught (in promise) TypeError: parent is null
traversePath traversal.js:81
checkPath traversal.js:145
comparePaths traversal.js:171
traversePaths traversal.js:99
traversePaths traversal.js:105
comparePaths traversal.js:171
Tainted_update index.js:355
set index.js:193
creatableselect0_value2_binding +page.svelte:1719
creatableselect0_value2_binding +page.svelte:719
ctx Component.js:138
select_justValue_binding CreatableSelect.svelte:282
select_justValue_binding CreatableSelect.svelte:113
ctx Component.js:138
update Select.svelte:274
update scheduler.js:115
flush scheduler.js:79
promise callback*schedule_update scheduler.js:20
make_dirty Component.js:81
ctx Component.js:139
select_value_binding CreatableSelect.svelte:277
select_value_binding CreatableSelect.svelte:109
ctx Component.js:138
handleMultiItemClear svelte-select.js:4054
pointerup_handler_1 Select.svelte:765
pointerup_handler_1 svelte-select.js:2109
prevent_default dom.js:371
stop_propagation dom.js:381
listen dom.js:361
listen_dev dev.js:133
mount svelte-select.js:2141
mount svelte-select.js:2325
mount svelte-select.js:1937
mount svelte-select.js:1741
update svelte-select.js:3484
update scheduler.js:119
flush scheduler.js:79
promise callback*schedule_update scheduler.js:20
make_dirty Component.js:81
ctx Component.js:139
select_value_binding CreatableSelect.svelte:277
select_value_binding CreatableSelect.svelte:109
ctx Component.js:138
itemSelected svelte-select.js:4186
handleSelect Select.svelte:574
handleItemClick Select.svelte:588
click_handler Select.svelte:702
click_handler svelte-select.js:1269
stop_propagation dom.js:381
listen dom.js:361
listen_dev dev.js:133
mount svelte-select.js:1391
mount svelte-select.js:1000
mount svelte-select.js:658
update svelte-select.js:3423
update scheduler.js:119
flush scheduler.js:79
promise callback*schedule_update scheduler.js:20
Just went to production and svelte-select is causing these errors
Any way of fixing this?