How to create a true two-way bound decimal input?

[gerricom]

I'm trying to wrap my head around how to have a nice decimal input field for my little svelte project. I think, I'm trapped in kind of a situation where I can achieve only two out of three requirements:

• the original (internal?) value shall be a number, so that I can I do calculations and pass the value over to my API without doing some parsing everytime I need a number
• the user facing input shall be masked/formatted, so that a user has to input and can input a decimal "the germany way" like "1.234,56" (dot as thousands separator, comma as decimal sep. and only two decimals allowed). The input shall automagically convert ,1 to 0,10 and so on...
• have it two-way-reactive so that a user can change it which results in the correct unformatted/masked number, but also the input shall accept changes of the state of the value and format it

Is there a way to achieve this or am I trying to do something too complicated?

I have tried:

• attachments
• getter/setter in bind:value
• events

But either I ran into some kind of infinite loops or things are overwriting each other...

I'd really appreciate if someone could hint me if this is possible and how to do this. Thank you very much!

[brunnerh]

If you are using effects that react to property changes, you could maybe use an internal flag along the lines of let updating = false, which you set to true while performing an update from a change/input event (the reset might need to happen deferred since effects also do, so potentially after a tick/setTimeout or in the blur/change event).

The effect has to make sure to always capture the value property as a dependency before exiting.

$effect.pre(() => {
  value; // dependency
  if (updating)
    return;

  // [create local formatted string for input]
});

Though, even if you don't have such a mechanism, the values should converge since the formatting is deterministic. But effects that update state should be avoided in general.

For a simple component where you just have a value and formatted value, a derived that can be overwritten on input might be enough. You can also interact with the input element directly if the underlying state is unaffected.

What does seem a bit tricky with the derived approach, is updating the value live on input because the formatted value would try to change while the user is still typing. Maybe a $derived.by with an escape hatch flag like the one outlined for effects could help.

There are also several Svelte component libraries out there, you could check if any of them have implemented something similar.

[webJose]

See one of these, which are the same solution with a slightly different approach:

DEMO: Keep caret in correct position after formatting the textbox's value - Bindable caretPos property
DEMO: Keep caret in correct position after formatting the textbox's value - Attachments

These solve an extra problem: How to get to the input element when the input element is provided by a custom Input component. You can forget about that part if it doesn't apply to you.

The solution is getter/setter binding + setting the caret to the right position. This code does this for a specific format, so you'll need to come up with the algorithm for your formatted value.

[AeroerMak]

When you bind value directly to , Svelte will overwrite the input field each time your internal value changes.
If you also listen for input events and modify the value, it can cause update loops.

So Maybe need to separate:

• The internal numeric state, and
• The formatted display value, & keep them in sync manually but safely.

I can be wrong also, But maybe just it try

[gerricom]

Thanks for all that input! @webJose pointed me to another problem which I overlooked when hacking together a solution: Setting the position of the caret to the correct place. While his solution works with his format, it can get a bit more tricky with decimal inputs... I'm not there yet...