I've done an extensive search here on the forum, but unfortunately, I couldn't find a solution to what we're looking for.
One of our customers needs a specific function: when a numeric input field loses focus, the entered value should not be committed, and instead, it should revert to the original value.
I tried to achieve this by saving the current value as a "previous value" during the onFocus event and then reverting to that value during onBlur. However, this approach is causing some unwanted behavior, and the value still gets committed.
Does anyone have a solution for this? Thanks in advance!
I forgot to mention, I've used button mode, had it implemented for the customer, they didn't like it. I made the same argument as you victordcq, but the customer is not having it in this case...
The closest I could get without some type of JS injection magic was pressing the enter key twice which is less than ideal.
No I didn't try any JS injection magic, I'll leave that to @victordcq
If I were in your place, I would tell them they can have the button mode for free but if they're insisting on this functionality, then they'll need to pay for the extra work to develop the component.
The behaviour was that the value was saved correctly to a PreviousValue custom property. But when we lost focus, by clicking outside of the numeric input field, the value got comitted before it could be reverted to the PreviousValue.
But in the end it went back to the previous value?
what are you commiting it too and how?
bidirctionbinding i guess? Just turn that off and only commit when the onenter key was detected.
It does, however, the value of self.props.value doesn't actually change until after you press enter. Which means if you try to overwrite a custom property with the newly entered value based on the enter key press, you have to press the button twice, once to write the value, and again to write the value to the previous value.
I suppose you could potentially use onKeyPressed, but that is generally not recommended.