Swap order of bindings and event listeners

shaun-wild commented 2 years ago

Summary

This PR swaps the attributes for binds and events in the Input and FormCheck components.

The Problem

As it turns out, the order of these attributes actually matters in the input, select etc components. If the event listener is listed before the bind, the bound value will not be up to date when the event listener is called.

E.g.

<input on:change={xxx} bind:value={yyy} />

and

<input bind:value={yyy} on:change={xxx} />

function differently, in the first example, yyy will not be the correct value in the event listener.

The Solution

Considering there is currently no way to specify the order of attributes on sub-components, I think it makes more sense to use a sensible default.

Wasn't really sure how to test this without creating a test component. Please someone let me know if there is a better way to test this.

shaun-wild commented 2 years ago

This fixes https://github.com/bestguy/sveltestrap/issues/461 and is a replacement for https://github.com/bestguy/sveltestrap/pull/468.

clemens-tolboom commented 2 years ago

Allowing different ordering is a feature of svelte but a bug for sveltestrap.

See comment https://github.com/bestguy/sveltestrap/issues/461#issuecomment-1080258728

This is a know 'bug' https://github.com/sveltejs/svelte/issues/4616 but it seems to be a feature and has a merged PR https://github.com/sveltejs/svelte/pull/6887 documenting it.

See just above https://svelte.dev/docs#template-syntax-element-directives-bind-property-binding-select-value

shaun-wild commented 2 years ago

I have created an issue on the official svelte repo, see https://github.com/sveltejs/svelte/issues/7415.

Hopefully there will be a nicer fix in future.

clemens-tolboom commented 2 years ago

I have created an issue on the official svelte repo, see https://github.com/sveltejs/svelte/issues/7415.

(huh) that's why I said

Allowing different ordering is a feature of svelte

as it is not a bug in Svelte.

bestguy / sveltestrap