Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creatable select not stable #659

Open
socketopp opened this issue Dec 27, 2023 · 1 comment
Open

Creatable select not stable #659

socketopp opened this issue Dec 27, 2023 · 1 comment

Comments

@socketopp
Copy link

socketopp commented Dec 27, 2023

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
Copy link
Author

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

image

Any way of fixing this?

@socketopp socketopp changed the title Creatable select: Uncaught (in promise) TypeError: parent is null Creatable select not stable Jan 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant