4 Level Picklist Dependency

Question

I'm trying to set up 4 picklist that are dependent on each other. The idea is this:

There are 4 different picklist. Pick1, Pick2, Pick3, Pick4

Pick2 is dependent on Pick1.

Pick3 isn't necessarily 'dependent' but the value is set by a concatenation of both Pick1 and Pick2.

Pick4 is dependent on Pick3.

The problem is although Pick3's value on the frontend updates, there is no change to Pick4's values. So you'll see val1-val2 visually showing on the picklist. I did a console log on Pick3 and found that the concatenation of Pick1 and Pick2 wasn't picked up all the way.

Pick3's value should be set to val1-val2 but the console log is only showing val1-. I'm thinking that's why Pick4's values aren't updating.

<lightning:recordEditForm>
     <lightning:inputField aura:id="ex1" fieldName="Pick1" conchange="{!c.updateVal}" />
     <lightning:inputField aura:id="ex2" fieldName="Pick2" conchange="{!c.updateVal}" />
     <lightning:inputField aura:id="ex3" fieldName="Pick3" />
     <lightning:inputField aura:id="ex4" fieldName="Pick4" />
</lightning:recordEditForm>

controller.js

updateVal:function(component, event, helper){
     var p1 = component.find("ex1").get("v.value");
     var p2 = component.find("ex2").get("v.value");
     var p1p2 = p1+ '-' +p2;
     var p3 = component.find("ex3").set("v.value", p1p2);
}

Answer 1

Problem solved. I had to re-render the 4th dependent picklist after the value for the third picklist was set. I accomplished this using <aura:if isTrue="">