Entering "2.01" in a number input is impossible.

[averydev]

With an input with a type of "number", there's a problem.

To replicate create an input like so:

<field.Input @type="number" step="0.01" />

When you try and type in 2.01 after typing the 0 the value will be reset to 2 with no decimal point. You can copy-paste the value in just fine.

What's happening is in handleInput(e: Event | InputEvent): void the input is getting transformed with parseFloat(e.target.value). That's the right thing (basically) because otherwise number fields would return string values.

However JS doesn't have the concept of "2.0" so it is parsed into "2" and set, wiping out the decimal point.

In short, it's impossible to type in decimal values that contain 0.

I've added a test replicating the issue here:
https://github.com/stackdevelopment/ember-headless-form-number-issue/tree/number-input-issue

I'd be happy to fix it if you point me in the direction for how you'd like to approach it.

[simonihmig]

Thanks for reporting @averydev , and sorry for the late response!

Great that you have already a nice reproduction of this as a test! Happy to accept this as a PR alone, even when not coming together with the actual fix!

If you want to work on a fix, my initial thinking was to add some logic where the setValue is called here to not call setValue when the input has a (string) value that represents the same number, but would cause parseFloat to strip something out. Thinking aloud:

• check if the (string) value end on ., or has . and ends on 0?
• check if value !== String(parseFloat(value))

Does that make sense?

[simonihmig]

Looking at the code around parseFloat, I just realized there is even another issue with that: #483 🤦