How to use richtext in multifield (in CQ5 dialog)? (prevent “this.el.dom is undefined” error)

Question

I have created a custom component, and try to use RTE (xtype="richtext") inside the multifiled in my dialog.

Now, when I try to delete item, or after dialog was closed & reopened add another one the dialog will neither close, nor save the data with OK button.

dialog.xml:

<myField
    jcr:primaryType="cq:Widget"
    name="./myField"
    xtype="multifield">
    <fieldConfig
        jcr:primaryType="cq:Widget"
        xtype="richtext">
    </fieldConfig>
</myField>

Sham HC posted 2 solutions at AEM FAQ's:

1. Use textfield instead of a richtext Or try not to use a richtext in a multifield.

2. If richtext in a multifield is required then follow below and verify in your development envirnoment.

   Overlay /libs/cq/ui/widgets/source/widgets/form/RichText.js At the overlayed file for the method syncValue (Line 910) replace [1] with [2].

   [1] this.el.dom.value = html;
   [2] if(this.el.dom){this.el.dom.value = html;}
   

The problem is that I would like to use make it without changing Adobe's code.

Answer 1

I have found a workaround, that does not require changing CQ widget's code. You need to set richtext's destroy event handler, to create dummy this.el.dom:

<myField
    jcr:primaryType="cq:Widget"
    name="./myField"
    xtype="multifield">
    <fieldConfig
        jcr:primaryType="cq:Widget"
        xtype="richtext">
        <listeners
            jcr:primaryType="nt:unstructured"
            destroy="function() {this.el.dom={};}"/>
    </fieldConfig>
</myField>

Answer 2

<fieldConfig
       jcr:primaryType="cq:Widget"
       height="{Long}100"
       xtype="richtext">
       <listeners
           jcr:primaryType="nt:unstructured"
           destroy="function() {this.el.dom={};}"/>
</fieldConfig>