# Commit on focus loss numeric input field Perspective

**URL:** <https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 27, 2024, 7:41am UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191 "2024-08-27T07:41:29Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aernout\_Ottens](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aernout_ottens/32/66816_2.png) [@Aernout\_Ottens](https://forum.inductiveautomation.com/u/Aernout_Ottens)\
**Post date:** [August 27, 2024, 7:41am UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/1 "2024-08-27T07:41:30Z")

</div>

Hello everyone,

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!

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [August 27, 2024, 12:54pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/2 "2024-08-27T12:54:43Z")

</div>

This may not be ideal, but consider switching the component's mode to `button`.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 27, 2024, 1:06pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/3 "2024-08-27T13:06:17Z")

</div>

Yeah button mode is the way to go. Not editing when lossing focus is just very confusing. But a button is clear

---

<div class="post-metadata">

**Author:** ![Aernout\_Ottens](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aernout_ottens/32/66816_2.png) [@Aernout\_Ottens](https://forum.inductiveautomation.com/u/Aernout_Ottens)\
**Post date:** [August 27, 2024, 1:11pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/4 "2024-08-27T13:11:32Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 27, 2024, 2:46pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/5 "2024-08-27T14:46:33Z")

</div>

than they only want edit when pressing enter?

---

<div class="post-metadata">

**Author:** ![Aernout\_Ottens](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aernout_ottens/32/66816_2.png) [@Aernout\_Ottens](https://forum.inductiveautomation.com/u/Aernout_Ottens)\
**Post date:** [August 28, 2024, 11:13am UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/6 "2024-08-28T11:13:36Z")

</div>

That is indeed correct, they only want to commit the change when pressing enter.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 28, 2024, 12:10pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/7 "2024-08-28T12:10:28Z")

</div>

~~It's just not possible with the base component.~~

 

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.

---

<div class="post-metadata">

**Author:** ![Aernout\_Ottens](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aernout_ottens/32/66816_2.png) [@Aernout\_Ottens](https://forum.inductiveautomation.com/u/Aernout_Ottens)\
**Post date:** [August 28, 2024, 12:15pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/8 "2024-08-28T12:15:41Z")

</div>

That was my reaction as well. If some JS injection magic is possible, I'd really like to go for it.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 28, 2024, 12:19pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/9 "2024-08-28T12:19:01Z")

</div>

Doesnt the component have a onkey press event where you can check for enter?

I dont think you really need js for this

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 28, 2024, 12:20pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/10 "2024-08-28T12:20:09Z")

</div>

> [@Aernout\_Ottens](#):
>
> 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.

what kind of behavior did you have here,  
what was your code

---

<div class="post-metadata">

**Author:** ![Aernout\_Ottens](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aernout_ottens/32/66816_2.png) [@Aernout\_Ottens](https://forum.inductiveautomation.com/u/Aernout_Ottens)\
**Post date:** [August 28, 2024, 12:32pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/11 "2024-08-28T12:32:33Z")

</div>

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.

onFocus was:

```python
def runAction(self, event):
	self.custom.PreviousValue = self.props.value

```

onBlur was:

```python
def runAction(self, event):
	self.props.value = self.custom.PreviousValue;

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 28, 2024, 12:35pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/12 "2024-08-28T12:35:48Z")

</div>

> [@Aernout\_Ottens](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 28, 2024, 12:48pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/13 "2024-08-28T12:48:50Z")

</div>

> [@victordcq](#):
>
> Doesnt the component have a onkey press event where you can check for enter?

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 28, 2024, 12:51pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/14 "2024-08-28T12:51:34Z")

</div>

> [@lrose](#):
>
> I suppose you could potentially use onKeyPressed, but that is generally not recommended.

yes it is not, but its what has to be used here

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [August 28, 2024, 12:58pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/15 "2024-08-28T12:58:18Z")

</div>

Setting it up the way the customer wants seems like a foot gun to me.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 28, 2024, 1:10pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/16 "2024-08-28T13:10:13Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d86187a749f8814161c6fd798e8c69fbdda2015e.png)

This works easy enough for me, just only push the updated value to your tag or db on the keypress. instead of using a bidirectonal binding or whatever

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 28, 2024, 2:12pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/17 "2024-08-28T14:12:49Z")

</div>

Still think I would tell them it isn't possible and make them live with a better UI design. Oh well.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 28, 2024, 2:14pm UTC](https://forum.inductiveautomation.com/t/commit-on-focus-loss-numeric-input-field-perspective/95191/18 "2024-08-28T14:14:00Z")

</div>

All depends if you are paid by hour or not 😛
