Find the last clicked input element, and update its value with a variable

[intimur]

Hi, we have a page with multiple input elements and a “Calculator” Form Modal to build any number.

How it works: We click on any input element, it opens the modal, the user builds the number (stored variable).
Now the challenge for us is to update the latest clicked input element value, with the stored variable on validation, how to manage that on a generic level?

We added a JS in the validation workflow of that calculator to manage the updates, but it is heavy and does not work all the time correctly. We don’t want to use a tree / switch logic as we will use this modal across all the app to update inputs.

Any recommendations?

[Broberto]

You might want to do something like an object with some identifiers (your inputs), such as this

and a text variable containing the “current” input that is being edited

After this setup, what you can do is do something like this:

1. On click open the modal, set the Current CHF input to be the current clicked input’s identifier
2. Edit the amount of the CHF state as follows by doing a partial update of the Object (bind the Current CHF input to the Path) and set your value to whatever you do with the modal:
   
   

This way you’ll be able to access it as you can see in the debug (left section):

[intimur]

Thanks for the tip. On the page I have 20 inputs and would like to use that calculator modal across many other pages. So if I understand well, I have to add all the inputs (identifiers) of a page in the object?

[Broberto]

I think you should made a component if it’s that many elements that will simplify your logic a lot

[intimur]

thanks again for the tip @Broberto , working fine in production now