Detecting setFields via event

[smblee]

Is there a way for me to detect setFields event from the input itself? From the code, it seems like setFields just calls setControlValue form helper method (https://github.com/pablo-abc/felte/blob/main/packages/common/src/utils/domUtils.ts#L197) which just sets the value.

It would be nice if we can also have the option to have the event bubble up to the input itself so I can manually synchronise relevant data.

Use case is with iMask where I am handling it by a visible "mask" input element, and a hidden raw/unmasked input thats updated manually. Currently it only works one way via user input, but I want it to work the other way of programatically setting.

<input
	bind:this={maskedInputRef}
	use:maskInput={maskPattern}
    on:maskaccept={(e) => {
		if (unmaskedInputRef) {
			unmaskedInputRef.value = Number.parseInt(e.detail.unmaskedValue, 10);
			unmaskedInputRef.dispatchEvent(new Event('input', { bubbles: true }));
		}
	}}
/>

<input
	bind:this={unmaskedInputRef}
	{name}
	type="number"
	class="hidden"
	on:change={(e) => {
         // TODO: Capture setFields event and update the mask input accordingly
	}}
/>

[smblee]

possible to get eyes on this? @pablo-abc

[smblee]

a simpler question here would be... what actually happens when setFields is called, and how can we capture that event in the underlying input component?

[pablo-abc]

Hey, I'm really sorry for the delay! (These past few months have been chaotic for me. Moving to another country and job 😅)

setFields (as I guess you already saw from the code) calls setControlValue which in turn, sets the respective value in the HTML input. The reason why you don't see an event being fired is because that's just how the browser works. Programmatically setting an input's value does not trigger any events. Pre 1.0 I had experimented with making a Proxy to the input's value to detect this but this caused many hard to diagnose issues for little value (imo) so I eventually dropped it in 1.0.

So in this case, with the current behaviour, you'd have to manually call whatever you want after calling setFields rather than expecting an event to be triggered.

[smblee]

Hey @pablo-abc thanks for the reply and no worries i've been there!

And that's a bummer :/ Thought i found a clever solution around masking/unmasking values (if i had that last missing piece of detecting setField events resolved). Manually calling whatever works but would make it hard to abstract these hybrid inputs into their own components without hacky/custom workarounds.

I will try to go back to the drawing board and think of something else.