[Svelte] <Input> on:input event is not being propagated

[howesteve]

So as the title says. The <Input> component is "eating" the "on:input" events.

If I try to use this:

<Input
  on:input={(e) => {
	  // never called
	  console.log('on:input');
  }}
/>

... callback is never called and nothing is print. Tracking down the source, I can see this is caused by this line: https://github.com/AgnosticUI/agnosticui/blob/b577e806b9915b37684f67d1ad2292172de57cff/agnostic-svelte/src/lib/components/Input/Input.svelte#L400

... which is not propagating the event. I was hoping to implement a "validate-on-type" using <Input/>.

Is this a bug or desired behavior?

Thanks, Howe

[edwinwong]

Hi, I looked into this and think I've fixed it. It looks like lines 392-420 of Input.svelte used: value={value} on:input={e => value = e.target.value} rather than bind:value.

This because type is dynamic in: type={inputType} so two-way binding through bind:value can't be used. It looks like this manual two-way binding doesn't bubble the manually created on:input event.

My commit changes line 342: $: inputType = type; to a use directive: function typeAction(node) { node.type = type; } so that the type of the inputs can be assigned non-dynamically: <input use:typeAction> allowing for the use of bind:value.

The inputs now have a simple on:input event which appears to bubble properly.

I'm submitting a pull request, hope this is fix is correct!