For education's sake, I am trying to change a Text Input's value on the OnChange of that input using JS but I am finding some behavior I can't quite explain.
I am using the following JS to remove any alphabetic characters and then assigning that output back to the Input's variable so that it will have only the numbers and no characters.
$parameters.Out1 = $parameters.In1.replaceAll(/[^0-9.,-]+/g, '');
What I am finding is that although the local variable is correct (no characters), the input keeps the characters. But if instead of using the OnChange event I use the onkeyup then it works. I am thinking it has something to do with the OnChange event and how that works in OutSystems - It's not a native browser event right so how does it work behind the scenes? I think it is a timing issue but not sure how or why. Considering using setTimeout but don't want to overcomplicate it.
I have also tried simpler JS (like just adding a letter to the input) and that works - so I am not sure what is going on here, perhaps the replaceAll function runs for longer and thus messes with the timing.
Looking to understand how things work here rather than a plain yes or no answer... Can upload .oml if needed but it's just an input with an OnChange and JS and then assign... no special stuff.
Thanks
Hi @Nicholas Campbell ,
what I think is going on, is that there is an optimization in the rendering logic after an OnChange, deciding whether it is worth rerendering parts of the screen or not.
And this logic looks at the previous and current value of a variable, and only rerenders parts that depend on that variable if it's value changes. Observe for example that if you type a numeric after typing an alfanumeric, the input gets rendered again in alignment with the variable.
So if your javascript removed the letter just typed, then the variable didn't change, and no render is done of any elements on the screen that depend on that variable. You can see this if you add other inputs or expressions with that same variable, they will stay unchanged to the value before typing the wrong letter.
I think you stumbled on a bug in the front end of Outsystems, so could be worth reporting it.
As for why it works better with the onkeyup, it's probably along these lines :
Dorine
btw,
this is not caused by you using javascript, if you would do something purely lowcode in that OnChange that would result in the value being reset to exactly the previous value, you would see the same problem.
See attached, demo 2 for pure lowcode, demo 1 for comparing onchange to onkeyup
Hi Dorine
This is very interesting. I did not know it worked like this. Thanks for your answer. I will log it with them and see what they say. Appreciate the time for the demos also! Once I hear back from them I'll make your answer the solution if that is accurate as to what is happening, but it definitely sounds plausible.