[SalesForce] Cannot understand this $A.getCallback error

I've a parent component containing a formattedRichText component and an edit button.
Edit button onclick() calls a child component that hold a modal component.
That modal component contains an inputRichText component.

When the edit button from parent cmp is clicked :

  1. The attribute value from the parent component is set with the formattedRichText ouput.
  2. The child cmp opens the modal with the input rich text editor prepolulated with the attribute value.
  3. When the users click on the modal's save button, the value is sent back to the parent modal via a component event and printed in the formattedRichText cmp.

Evrything works well the first time i execute the process above, but for the next times, i get the error below :

Uncaught Error in $A.getCallback() [Cannot read property 'querySelector' of null]
[]1

Below is my parent.cmp component :

...
<aura:attribute name="value" type="String"/>

<lightning:buttonIcon iconName="utility:edit" aura:id="Name" ariaLabel="Lorem Ipsum" variant="border-filled"  onclick="{!c.handleEdit}" alternativeText="Editing 'Title'" />
<div class="slds-text-body_regular slds-text-align_left">
    <lightning:formattedRichText class="slds-text-heading_medium" aura:id="fieldNameValue" value="Edited Text" />                            
</div>
         <c:childComponent aura:id="customModalComponent" value="{!v.value}"/>

ParentController.js

//Prepoulate inputRichText child component.
...
component.set('v.value', 'formattedRichTextValue')

And the childComponent.cmp

...
<lightning:inputRichText aura:id="inputRichText" value="{!v.value}" placeholder="Type something interesting"/>

childComponentController.js

//send edited value to parent

...
var value = component.get('v.richTextValue');

var sendField = component.getEvent('updateField');

sendField.setParams({'richTextValue': value});

sendField.fire()

Could you please help me understand what i'm doing wrong so that i can solve this issue?

Thanks a lot!

Best Answer

I would suggest to dynamically create your child component when the user clicks the 'Edit' button. And when he clicks 'Save' you can use a Lightning Event to trigger the parent component to fetch the data again from the server and use a component.destroy() to remove your child component from the DOM. That should work all the time.

If needed I can work out a small demo component so you can understand this further. Let me know.