Commit on focus loss numeric input field Perspective

Ignition
1

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!

2

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

1 Like
3

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

4

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

5

than they only want edit when pressing enter?

6

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

7

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.

8

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

9

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

I dont think you really need js for this

1 Like
10

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

11

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:

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

onBlur was:

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

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.

1 Like
13

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.

14

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

1 Like
15

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

1 Like
16

image
image874×304 22.4 KB

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

2 Likes
17

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

18

All depends if you are paid by hour or not :stuck_out_tongue:

1 Like