rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.25k stars 175 forks source link

Creatable select not stable #659

Open socketopp opened 6 months ago

socketopp commented 6 months ago

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
socketopp commented 5 months ago

Just went to production and svelte-select is causing these errors

image

Any way of fixing this?