bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

on:input lag #342

Closed datasushi closed 3 years ago

datasushi commented 3 years ago

Thanks for making sveltestrap, I love it.

I noticed that on:input lags by one input.

See the following REPL for a side by side comparison to a regular input: https://svelte.dev/repl/4b1e4e711662484383d579010993abee?version=3.40.0

bestguy commented 3 years ago

Hi @datasushi , thanks for the heads up - hmm that's weird - this code looks correct: https://github.com/bestguy/sveltestrap/blob/master/src/Input.svelte#L122

But let me see what's up.

bestguy commented 3 years ago

Ah this is interesting, the order of bind:value and on:input matters here - this behaves as you expect:

<input
  bind:value
  on:input
  ...
/>

the current order does not:

<input
  bind:value
  on:input
  ...
/>

I'm thinking it's fine for me to change this, but let me take a look. If no bad side effects should be an easy fix.

datasushi commented 3 years ago

Went ahead and checked with regular Svelte, looks like this behaviour is intended, see here: https://github.com/sveltejs/svelte/issues/6197

bestguy commented 3 years ago

Ah thanks!

leviwolfe commented 2 years ago

I found Sveltestrap's behavior confusing and unintuitive that the event always seemed to have a buggy old value as well. I was attempting to integrate validation with Vest which uses on:input in examples to check validity.

The official Svelte docs have this example:

<input
    on:input="{() => console.log('Old value:', value)}"
    bind:value
    on:input="{() => console.log('New value:', value)}"
/>

Perhaps there is a way the Sveltestrap component could export two different named handlers?