[BUG] Number input modifying itself

[chky-nmnsoftware]

The title is a little weird, but I'll do my best to explain. From my understanding, when you enter a number, delete a number, etc, the input box takes what you have inputted, processes it, and then outputs it back. The issue with this is that in some cases, it may cause unwanted results.

For example, if I had input 0.501 and I wanted to turn it into 0.502, I would simply press backspace once and then press "2". That should be the expected behavior. However, the actual behavior differs. In reality, when I press backspace to remove the "1" from 0.501, the number input rounds the answer to 0.5, and then I have to type "0" and "2" in order to get my desired result. To expand upon this, if I wanted to change the number to 0.402, when I press backspace once it will turn into 0.5, and if I press backspace another time, it will turn to 0 (getting rid of the period).

(I am pressing backspace once, but it "deletes" two characters)

This issue is even worse when there are rounding errors. For instance, if you are modifying the width of an object, since it is (from what I assume) using the scale property as a bases, it ends up having rounding errors x.000000002, which you cannot even delete unless you delete the entire number.

(When the rounding error occurs, I am actively pressing backspace, but nothing is happening. Additionally, when I first highlight chunk of the rounding error, I press backspace which still gives no results)

Any input should not be sterilized until the user unfocuses from the input box. Only then should the actual input box be updated to represent the actual value. As for the live preview, you can sterilize the user input live (and update the target object), however, do not update the input box value itself until the user is no longer focused. I am not exactly sure how this all works, however, it could look something like this:

// This should run whenever the user changes the input (e.g.: typing)
this.input.oninput = () => {
    // Transform the value to what it should be
    const newValue = sterilizeInput(this.input.value)
    // Modify **only** the property
    this.targetObject.property = newValue
}

// This should run whenever the user unfocuses from the input box (e.g.: clicking away)
this.input.onchange = () => {
    // Transform the value to what it should be (or use the property's value)
    const newValue = sterilizeInput(this.input.value)
    // Modify the input (the property has already been modified by the above listener)
    this.input.value = newValue
}