Salesforce lightning component (aura) not posting data on first submit click but does on second?

Question

I am working on a lightning component (aura) and submitting form data via a button. what i am experiencing is that the form data is not getting posted on the first click. after verifying the data did not post, we click the button again (not refresh) and the data is correctly posted to the action link. I am not sure what i am doing wrong or what it is that i am not understanding about how this is working. I thought the data would be available after calling the helper.buildParty() function. Here is the code im working with...

---

component

<!-- myLabel is the url to the external page -->
<form aura:id="cmaForm" action="{!v.myLabel}" target="_blank" method="post">
                <input type="hidden" name="client" aura:id="client" value="jimbob" />
                <input type="hidden" name="party" aura:id="party" value="{!v.party}" />
                <input type="submit" value="Create Party/Link Party" />
            </form>

---

controller

submitDetails: function(component, event, helper){
            helper.buildParty(component, event, helper);
            component.find("cmaForm").getElement().submit();
    }

---

helper

buildParty : function(component, event){
        //fields are being set in another function from the helper that pulls from the force:recordData
        let buildParty ='{'+
            '"middleName": "'+component.get("middleName")+'",'+
            '"dateOfBirth": "'+component.get("v.dateOfBirth")+'",'+
            '"lastName": "'+component.get("v.lastName")+'",'+
            '"state": "'+component.get("v.state")+'",'+
            '"address1": "'+component.get("v.address1")+'",'+
            '"address2": "'+component.get("address2")+'",'+
            '"city": "'+component.get("v.city")+'",'+
            '"zipCode": "'+component.get("v.zipCode")+'",'+
            '"firstName": "'+component.get("v.firstName")+'", '+
        '}';
        
            component.set("v.party",buildParty);    
            console.log('Get Party: '+component.get("v.party"));
    }

I've tried a promise, chaining promises. I've tried settimeout. I've tried populating values using afterRender(). I've tried initializing the data using doInint(). Ive tried initializing the data on (changeType === "LOADED") still no result.

Answer 1

Updating an attribute doesn't immediately update the DOM, so you need wait for a render cycle:

helper.buildParty(component, event, helper);
setTimeout(
  $A.getCallback(
    function() {
      component.find("cmaForm").getElement().submit()
    }
  )
);

Here, setTimeout will wait for one render cycle, and $A.getCallback is needed to modify a component outside a life cycle event.