Mobile - clear input using javascript with react

Mobile - clear input using javascript with react

  

Hi guys,

I am implementing a clear option within a input field, like the 'search' input type, but custom. I was wondering if someone knew the correct function calls in javascript so that all the components of the screen react to the value being reset.

Right now on click on the 'reset' option in the input, it does something like input.value = "", but the issue is that the rest of the screen doesn't recognize the input as cleared out.

For example, button 1 is only enabled if two inputs have values inputted, but once the clear button is triggered on one input, the value is cleared, but the input button is still enabled.

I have ways around this, for instance, instead of clearing the value in javascript, I trigger an event that will clear the value out in a client action. and the screen will react properly, but I am trying to avoid having to handle an event for every input.

If someone could point me to the right functions to accomplish this within javascript, that would be great.

Thanks a lot!

Justin

Hi Justin,

It seems to me you are trying to circumvent the OutSystems way of working, but I'm not sure why. Or am I missing something?

Hi Killian,

Here is an example of what I am trying to achieve: (I've also attached the demo OML)

https://jbabel22.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ClearInputExample/HomeScreen?_ts=636558328395853085

The first input uses the search type input, so when clicking the 'x' that shows up after typing, the first button knows the value is clear, and becomes disabled. No logic needed.

The second input uses javascript to set the input.value to '' on click of the clear button, but in this case the button stays enabled, thinking there is still some value.

The third uses the same block as the second, but instead of clearing the value in javascript, it triggers an event and clears the value in a client action callback. In this case the button recognizes the value as cleared and becomes disabled.


I don't necessarily think this is trying to circumvent any native functionality of OutSystems, as essentially the client action that is called on the callback is doing what I am trying to run within javascript anyway.

Especially with how heavily integrated the mobile side now is with javascript, I would think there would be a way for me to clear the value in javascript with the button knowing the value is now clear, but I am just not using the correct function calls.

Otherwise, I would need to set up callback functions based on the event being triggered, for every single input block that would have this functionality and manually clear out the value of each. These is far less efficient development wise, and also creates more room for error.

That being said, if the correct way of achieving this, without using a 'hack' is to implement the logic using events, that is fine, but I just wanted to be sure I that there wasn't a way to properly implement this via javascript.

Thanks for the reply,

Justin