Lightning:input elements update

Question

I have a form where the user sees a product, discount, and a total price. The total price is calculated from the list price, and the discount is defaulted to 0.

The requirement is that the user can provide a discount (f.ex. 50%) -> so total price gets updated; or the user can also provide directly the total price -> the discount is derived from that.

I used two handlers for those 2 fields, but if I update any of them -> the update gets stuck in a loop, and the fields get locked, i.e. I cannot edit them.

I believe it has to do something with event bubbling. Do you have any suggestions? Thanks!

Answer 1

Yes, because of how Lightning works, the change handler will result in infinite events firing back and forth between the two handlers. You'll probably want to ignore the next event, like this:

<aura:attribute name="ignoreUpdateEvent" type="Boolean" default="false" />

...

if(!component.get("v.ignoreUpdateEvent")) {
  component.set("v.ignoreUpdateEvent", true);
  helper.calculateNewValues(component);
} else {
  component.set("v.ignoreUpdateEvent", false);
}

This will make sure that you won't cause an infinite event loop.