Input type select behaves different than regular select

[konrad-pawlus]

This component:

<Input type="select" class="" name="parentCategory" id="parentCategory" bind:value={category.parent}
       on:change={reloadCategories}>
    {#each parentCategories as c, i}
        <option value="{c.id}">{c.id} - {c.name}</option>
    {:else}
        <option disabled>- no categories -</option>
    {/each}
</Input>

behaves differently than regular select:

<select name="parentCategory" id="parentCategory" bind:value={category.parent}
       on:change={reloadCategories}>
    {#each parentCategories as c, i}
        <option value="{c.id}">{c.id} - {c.name}</option>
    {:else}
        <option disabled>- no categories -</option>
    {/each}
</select>

when in reloadCategories there is a simple log:

console.log('Parent category', category.parent)

category value is printed as before binding.
In normal select this works properly, value is bind and function attached to on:change gets correct value.

Seams like Input calls on-change before value is bind.

[bestguy]

Hi @konrad-pawlus , this is kind of intentional/unavoidable, and a side effect of the way Svelte handles custom components.

It works because you specified the order of the bind:value and on:change. If you reversed it would be consistent.

Unfortunately we must specify some order in the custom component: https://github.com/bestguy/sveltestrap/blob/master/src/Input.svelte#L495

as Svelte does not allow you to pass on:events in restProps.

This is related to: sveltejs/svelte#4616

[konrad-pawlus]

Hi @bestguy , I created reply to show what I am observing: https://svelte.dev/repl/5c77db352e4d442bb3206d4ea676f865?version=3.42.4
Please select any value from first select box, than do this once more, what I observe:

• select Cat 2 - still null value is bound,
• Select Cat 3 - value of 2 is bound,

Than do same with regular select. It works as expected.

I understand that you specify this in an order, and see that issue on svelte is still open. Maybe changing order so bind happens first would be a temporary solution?

[bestguy]

Maybe changing order so bind happens first would be a temporary solution?

That is an option, however there are people who use the on:change to do validation prior to setting value, etc.

Might I ask what functionality you are trying to accomplish with on:change that requires the value and on:change to be in sync?

[konrad-pawlus]

I am just developing 2 simple selects, 2nd one options are populated on 1st one change. This can be accomplished exactly as described with vanilla Bootstrap.

[bestguy]

I'd normally use a computed that is derived from the first value, but can send a sample if that would help.

[konrad-pawlus]

I solved it by workaround using basic select instead of component.