Use two inputs in resusable element to update each other

[robert21]

I am creating a reusable element that contains two input fields: one that contains an amount that is a percentage of a given base amount, the other is the percentage itself:

I would like users to change either input, and have the other update accordingly. For example, if my base amount is $100 and I enter 3% in the percentage input, the calculated amount input should change to $3. Likewise, if my base amount is $100 and I enter $5 in the calculated amount input, the percentage input should change to 5%.

I have three states setup in the element to handle these three values:

I display the calculated amount and percent values via the Initial content property:

My workflows look like this:

Each of these workflows work great, over and over, until I switch between the two inputs. For example, I can change the percent input from 3% to 2% to 1%, and each time the calculated amount displays properly. However, if I then change the calculated amount, the percentage won’t change. Conversely, I can change the calculated amount from $3 to $2 to $1, and each time the percent displays properly. However, if I then change the percentage, the calculated amount won’t change. I could sure use some help on this one!

[romanmg]

Put each input inside a group and reset the other input’s group after the state change in your workflow. They don’t update because once you touch it, Bubble will ignore the initial content. By resetting the group (which resets the input within it), it’ll forget you touched it and honor the initial content again. Do this for each input workflow.

[robert21]

That worked perfectly. Thanks, @romanmg !