<uui-input> number onInput value sync

[leekelleher]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.12.2

Bug summary

When using <uui-input type="number"> with a decimal value, deleting the decimal places causes the input to auto remove the dot and refocus the text-cursor to the start of the input.

Specifics

The onInput event of the <uui-input> component attempts to keep the value in sync with the inner <input> element.

ref: https://github.com/umbraco/Umbraco.UI/blob/v1.12.2/packages/uui-input/lib/uui-input.element.ts#L269

When using the number input type, this can cause a jarring effect as the numeric value rendered on-screen is not the same as the <input type=number>'s inner value.

For example, if you type 123.456, then delete the last 456, (making the value 123., with dot), the inner value (from HTMLInputElement) would be 123 (without dot). This will cause the <uui-input> to update the value and set the focus/cursor at the start of the input.

Recording.2025-02-04.153134.mp4

Steps to reproduce

1. Configure an <uui-input type="number"> component, (or visit the Number Input Storybook page).
2. Input the value 123.456.
3. Delete the characters 456, (leaving the value as 123., don't delete the dot).
4. Notice that the value has changed to 123 and the focus/text-cursor is at the start of the input.

Expected result / actual result

That the <uui-input type="number"> component acts the same as <input type="number">, so that the text value of the input is what has been entered and not evaluated from the DOM.

[leekelleher]

To add a discussion point on this issue, what do we think about allowing the step attribute to accept a value of "any"? 🤔
re: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step