Help with Lightning Component error

Question

I can't seem to figure out the cause of the error, or a sufficient workaround but here's my predicament. I've built a lightning component which contains an icon. On click of this icon, it opens a modal with the corresponding records edit page inside using the force:recordEdit component.

Here is the markup of the component:

<div role='dialog'>
    <div aura:id='editModal' class='slds-modal'>
        <div class='slds-modal__container'>
            <button class="slds-button slds-modal__close" onclick="{!c.openEdit}">
                <span style="color:white;">X</span>
            </button>
            <div class="slds-modal__content">
                <force:recordEdit aura:id="edit" recordId="{!v.record.Owner.Id}"/>
            </div>
            <div class='slds-modal__footer'>
                <ui:button label="Save" press="{!c.saveUser}"/>
                <ui:button label='Cancel' press="{!c.openEdit}"/>
            </div>
        </div>
    </div>
</div>

And here are the relevant JS functions:

saveUser : function(component, event, helper) {
    component.find("edit").get("e.recordSave").fire();
    helper.init(component);
},

openEdit: function(component, event, helper){
    var modal = component.find('editModal');
    var backdrop = component.find('backdrop');
    $A.util.toggleClass(modal, 'slds-fade-in-open');
    $A.util.toggleClass(backdrop, 'slds-backdrop--open');
}

The code in the helper function called from saveUser is irrelevant as the error occurs whether it is present or not.

The strange thing here is that everything works exactly as desired the first time I open the modal and edit the record. On the next, and all subsequent attempts, I am greeted by an error message stating:

Unfortunately, there was a problem. Please try again. If the problem continues,
get in touch with your administrator with the error ID shown here and any other 
related details.Something has gone wrong. recordLayout.get is not a function. 
Please try again.

Everytime the page loads, it only works on the first attempt.

The call recordLayout.get is not present in my code, and upon examining the error stack, I determined the error was originating from the force$recordEdit.save function.

Is there someway to handle the save success so that subsequent edits do not throw an error like I'm seeing now? I'm assuming it has something to do with that since it only works on the first attempt after page load. Any assistance or nudge in the right direction is appreciated.

Answer 1

So after a ton of trial and error, I found what appears to be a working solution and figured I'd provide an answer to anyone running into related errors.

Instead of putting the force:recordEdit component directly in the markup, I create it dynamically and replace it with a new dynamically created component on each save action.

Here is the markup:

<div role='dialog'>
  <div aura:id='editModal' class='slds-modal'>
    <div class='slds-modal__container'>
        <button class="slds-button slds-modal__close" onclick="{!c.openEdit}">
            <span style="color:white;">X</span>
        </button>
        <div class="slds-modal__content">
            {!v.edit}
        </div>
        <div class='slds-modal__footer'>
            <ui:button label="Save" press="{!c.saveUser}"/>
            <ui:button label='Cancel' press="{!c.openEdit}"/>
        </div>
    </div>
</div>

And here is the relevant JS:

saveUser : function(component, event, helper) {
    component.get("v.edit").get("e.recordSave").fire();
    var modal = component.find('editModal');
    var backdrop = component.find('backdrop');
    $A.util.toggleClass(modal, 'slds-fade-in-open');
    $A.util.toggleClass(backdrop, 'slds-backdrop--open');
    helper.init(component);
},

And I added this to my init function:

$A.createComponent('force:recordEdit',
  {
    'aura:id': 'edit',
    'recordId': a.getReturnValue().OwnerId
  },
  function(edit){
    component.set('v.edit', edit);
  }
);

I haven't hit any setbacks or errors using this method, and would welcome any suggestions.