pre selecting items in dependent row of select tags.

[joachimm]

I have three select tags, I want the value of the previous select tag to feed the next, using a dictionary like {1: {2: [10], 3:[3,4]}}
When I pick an item from dropdown number one, I want to have the next dropdown, get populated and the last item selected. This second dropdown should in turn populate and select the third dropdown.
I expected this to be easier than it was. Which makes me suspect that I overlooked some functionality.
I was hoping that I could use option selected (using the last function below), but that seems to get overridden by initial state that I need to compute before I can use it.
I then tried to set the selection, where I derive the values, but of course I cannot both derive and set state.

Failing that I was hoping I could use the onChange callback, but that runs to late.

Here is a toy app that hopefully illustrates the issue I have. It feels like I am overstretching what get/set is made for.

<script>
    import { get } from "svelte/store";


    let checked = $state(false);
    let picked = $state();

    let major_pick = $state();
    let minor_pick = $state();
    let patch_pick = $state();

    let distribution = $state();
    let downloads = ["ubuntu", "debian"];
    let patches = {
        1: {
            1:[0,1],
            2:[0,1,2]},
        2: {
            1:[0,1,2,3,4],
            2:[0,1,2],
            3:[0]}
    };
    let pick = (row) => {
        console.log("pick", row, major_pick, minor_pick, patch_pick);
        checked = true;
        picked = row;
        // I need to do this or set undefined guards in the $derived.by below.
        major_pick = Object.keys(patches).at(-1);
        minor_pick = Object.keys(patches[major_pick]).at(-1);
        patch_pick = Object.keys(patches[major_pick][minor_pick]).at(-1);
    };

    let majorChanged = (element) => {
        console.log("majorChanged", major_pick);
    };
    let minorChanged = (element) => {
        console.log(element);
    };
    let patchChanged = (element) => {
        console.log(element);
    };
    let major = $derived.by(() => {
        console.log("derive major");
        picked;
        return patches;
    });


    let minor = $derived.by(() => {
        console.log("derive minor", major_pick, typeof(major_pick), major);
        // this is disallowed
        // minor_pick = Object.keys(patches[Number(major_pick)]).at(-1);
        let v = major[Number(major_pick)];
        console.log("minor v", v);
        return v;
    });

    let patch = $derived.by(() => {
        console.log("derive patch", minor_pick, patch_pick, minor);
        let v = minor[Number(minor_pick)];
        console.log("patch v", v);
        // For symmetry create a dict
        return Object.fromEntries(v.map((value) => [value, value]));
    });

    let download = () => {
        checked = false;
        console.log(picked);
    };
    let inspect = () => {
        console.log("Inspect", major_pick, minor_pick, patch_pick);
    };
    let last = (a, i) => i == a.length - 1;
    let dots = $derived([
        {
            name:"Major",
            items: Object.keys(major),
            get:() => major_pick,
            set:(v) => { 
                console.log("set major");
                major_pick = v;
                minor_pick = Object.keys(patches[major_pick]).at(-1);
                patch_pick = Object.keys(patches[major_pick][minor_pick]).at(-1);
        },
            onChange:majorChanged
        },
        {
            name:"Minor",
            items: Object.keys(minor),
            get:() => minor_pick,
            set:(v) => {
                minor_pick = v;
                patch_pick = Object.keys(patches[major_pick][minor_pick]).at(-1);
            },
            onChange:minorChanged
        },
        {
            name:"Patch",
            items: Object.keys(patch),
            get:() => patch_pick,
            set:(v) => { patch_pick = v;},
            onChange:patchChanged
        },
    ]);
</script>
{#each downloads as row}
    <table>
        <tbody>
            <tr>
                <td><button onclick={()=> pick(row)} disabled={checked}>Pick</button></td>
                <td>{row}</td>
            </tr>
        </tbody>
    </table>
{/each}
{#if checked}
<label for="distro">Distro</label>
<input id="distro" value={picked} disabled>
{#each dots as dot, didx}
<select bind:value={dot.get, dot.set} onchange={dot.onChange}>
    <option disabled>Pick a {dot.name} Version</option>
    {#each dot.items as item, idx}
        <option value={item} selected={last(dot.items, idx)}>{item}</option>
    {/each}
</select>
    
{/each}

<button onclick={download}>
	Send
</button>
<button onclick={inspect}>
	Inspect
</button>
{/if}

Anyone has any input?

[brunnerh]

I cannot both derive and set state

In the latest Svelte versions you can overwrite derived state, not sure if this helps here, though...

[joachimm]

Thanks for the input, overwriting derived made it a bit cleaner.

<script>
    import { get } from "svelte/store";


    let checked = $state(false);
    let picked = $state();

    let distribution = $state();
    let downloads = ["ubuntu", "debian"];
    let patches = {
        1: {
            1:[0,1],
            2:[0,1,2]},
        2: {
            1:[0,1,2,3,4],
            2:[0,1,2],
            3:[0]}
    };
    let pick = (row) => {
        console.log("pick", row, major_pick, minor_pick, patch_pick);
        checked = true;
        picked = row;
    };
    let major = $derived.by(() => {
        picked;
        return patches;
    });

    let major_pick = $derived.by(() => {
        return Object.keys(patches).map(Number).at(-1);
    });

    let minor = $derived.by(() => {
        return major[major_pick];
    });
    let minor_pick = $derived.by(() => {
        return Object.keys(major[major_pick]).map(Number).at(-1);;
    });
    let patch = $derived.by(() => {
        // For symmetry create a dict
        let p = Object.fromEntries(minor[minor_pick].map((value) => [value, value]));
        return p;
    });
    let patch_pick = $derived.by( () => { 
        return Object.keys(minor[minor_pick]).map(Number).at(-1)
    });
    let download = () => {
        checked = false;
        console.log("Download", major_pick, minor_pick, patch_pick);
        // Reset pick
        major_pick = Object.keys(patches).map(Number).at(-1);
    };
    let inspect = () => {
        console.log("Inspect", major_pick, minor_pick, patch_pick);
    };
    let last = (a, i) => i == a.length - 1;
    let dots = $derived([
        {
            name:"Major",
            items: Object.keys(major).map(Number),
            get:() => major_pick,
            set:(v) => { major_pick = v;},
        },
        {
            name:"Minor",
            items: Object.keys(minor).map(Number),
            get:() => minor_pick,
            set:(v) => { minor_pick = v;},
        },
        {
            name:"Patch",
            items: Object.keys(patch).map(Number),
            get:() => patch_pick,
            set:(v) => { patch_pick = v;},
        },
    ]);
</script>
{#each downloads as row}
    <table>
        <tbody>
            <tr>
                <td><button onclick={()=> pick(row)} disabled={checked}>Pick</button></td>
                <td>{row}</td>
            </tr>
        </tbody>
    </table>
{/each}
{#if checked}
<label for="distro">Distro</label>
<input id="distro" value={picked} disabled>
{#each dots as dot, didx}
<select bind:value={dot.get, dot.set} >
    <option disabled>Pick a {dot.name} Version</option>
    {#each dot.items as item, idx}
        <option value={item} selected={last(dot.items, idx)}>{item}</option>
    {/each}
</select>
    
{/each}

<button onclick={download}>
	Send
</button>
<button onclick={inspect}>
	Inspect
</button>
{/if}