LWC - lightning-record-edit-form 'onsuccess' Method Only Triggering Once

Question

I have a LWC to replace the standard New button on the Opportunity object. This LWC presents the user with a lightning-record-edit-form so they can input the Opportunity details. They can then either save the Opportunity as is, or they can elect to 'Add Builders'.

If they choose to add builders, this will take them to a separate lightning-record-edit-form, where they can enter in the builder details. Once entered, they can either choose to Save and Finish, which will create the Pricing__c record (i.e. a 'builder') and finish the process, taking them to the new Opportunity record page, or they can choose Save and Add Another, which will create the Pricing record, and then reset the form so that they can create another Pricing and repeat this process.

Here is the HTML for the Pricing creation form, including the buttons:

<lightning-record-edit-form
    object-api-name="Pricing__c"
    data-my-id = 'pricingForm'
    onsuccess={handlePricingSuccess} >

    <div class="slds-grid">
       <!-- COLUMN 1 -->
       <div class="slds-col slds-size_1-of-2">

          <lightning-input-field field-name="Company__c" required></lightning-input-field>
          <lightning-input-field field-name="Primary_Contact__c"></lightning-input-field>
          <lightning-input-field field-name="Pricing_Feedback__c"></lightning-input-field>
                                        
       </div>

       <!-- COLUMN 2 -->
       <div class="slds-col slds-size_1-of-2">

          <lightning-input-field field-name="Date_of_Request__c"></lightning-input-field>
          <lightning-input-field field-name="Client_Status__c" value="Tendering" required ></lightning-input-field>
          <lightning-input-field field-name="Estimators_Gut_Feel__c"></lightning-input-field>

          <!-- HIDDEN FIELDS -->
          <lightning-input-field class="slds-hide" field-name="Opportunity__c" value={opportunityID} ></lightning-input-field>

           <input type="submit" data-my-id="subtn2" class="slds-hide"/>

       </div>

   </div>
</lightning-record-edit-form>
                
<footer class="slds-modal__footer">
   <button class="slds-button slds-button_neutral" onclick={handleCancel}>Cancel</button>
   <button class="slds-button slds-button_neutral" onclick={handleSaveAddMore}>Save and Add Another</button>
   <button class="slds-button slds-button_brand" onclick={handleSaveBuilders}>Save and Finish</button>
</footer>

In the Javascript controller, the logic proceeds as follows:

When the user clicks 'Save and Add Another':

Call the handleSaveAddMore method:

    handleSaveAddMore(){
       this.addAnotherBuilder = true;
       this.handleSaveBuilders();
    }

This calls the handleSaveBuilders method:

    handleSaveBuilders() {
       var btn = this.template.querySelector('[data-my-id="subtn2"');
       if (btn) { btn.click(); }
    }

This 'clicks' on the hidden submit button on the form, creating the Pricing record. Once successful, the button's onsuccess method is called:

    handlePricingSuccess(){
       if(this.addAnotherBuilder){
          const toast = new ShowToastEvent({
             title: 'Success',
             message: 'Builder Added',
             variant: 'success'
          });
          this.dispatchEvent(toast);
          this.addAnotherBuilder = false;
          var inputFields = this.template.querySelectorAll('lightning-input-field');
          if (inputFields) {
                inputFields.forEach(field => { field.reset(); });
          }
       }
       else{
          this[NavigationMixin.Navigate]({
             type: 'standard__recordPage',
             attributes: { recordId: this.opportunityID, objectApiName: 'Opportunity', actionName: 'view' }
          });
       }
    }

This method creates the Pricing, and then resets the fields on the form, allowing for another one to be entered.

Problem

When I test this, I can create an Opportunity, then go to the Pricing screen (via the Add Builders button) enter the details and press Save and Add Another. The Opportunity and Pricing gets created as expected, and the form gets reset. However, when I enter in details to the form and press Save and Add Another again, nothing happens - no errors or anything, the button just does nothing.

I have added logging statements and can confirm that when I press 'Save and Add Another' the second time, it runs the handleSaveAddMore() method with no issues. However, the onsuccess method doesn't seem to get triggered, hence nothing happening on the front-end.

I've also tried making the hidden Submit button visible, then clicking 'Save and Add Another' the first time. This works as expected, the record is created and form cleared. Then, when I enter some details and manually press that Submit button (rather than using 'Save and Add Another'), nothing happens and the onsuccess method is still not called. This implies to me that there's some issue with the submit button: it only seems to be able to call its onsuccess method once?

Does anyone have any ideas as to why this would be happening? Thank you.

Answer 1

For anyone interested, I was able to find the solution to this. I'm not 100% clear on the 'backend' details, but it seems as though the issue came from the fact that it would sometimes take a bit of time for the system to create the Pricing record once I pressed 'Save and Add Another'. So, when I entered the details of the next pricing and hit Save, the first one hadn't yet been committed to the database, and this obviously caused some kind of concurrency-related problem - probably as it's not possible for an OnSuccess method to trigger when there's already a submission ongoing.

To resolve this, I updated the component so that when I pressed Save and Add Another, it would set an isLoading variable to true. I updated the HTML to display a loading spinner and hide the creation form while this variable was true. Then, in the OnSuccess method, it sets isLoading to false again, hiding the spinner and showing the form again. This worked as the onsuccess method only triggers once the record is created, and so this enforced that the user wait until this point before attempting to createa another Pricing.