WYSIWYG Editor Issue in UI Component multi row not working

Question

I have created dynamic rows with multiple descriptions filed(1 In a row) with the WYSIWYG editor.

Editor showing and working with first one-row element and rest element which added by adding more it's not working.

I have added a dynamic row by below code

<dynamicRows name="dynamic_rows">
    <settings>
        <addButtonLabel translate="true">Add More</addButtonLabel>
        <additionalClasses>
            <class name="admin__field-wide">true</class>
        </additionalClasses>
        <componentType>dynamicRows</componentType>
    </settings>
    <container name="record" component="Magento_Ui/js/dynamic-rows/record">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="isTemplate" xsi:type="boolean">true</item>
                <item name="is_collection" xsi:type="boolean">true</item>
                <item name="componentType" xsi:type="string">container</item>
            </item>
        </argument>
        <field name="category_description" formElement="wysiwyg" sortOrder="40">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="height" xsi:type="string">100px</item>
                        <item name="add_variables" xsi:type="boolean">false</item>
                        <item name="add_widgets" xsi:type="boolean">false</item>
                        <item name="add_images" xsi:type="boolean">false</item>
                        <item name="add_directives" xsi:type="boolean">false</item>
                    </item>
                    <item name="source" xsi:type="string">sun_brand</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <label translate="true">Description</label>
                <dataScope>description</dataScope>
            </settings>
            <formElements>
                <wysiwyg class="Magento\Ui\Component\Form\Element\Wysiwyg">
                    <settings>
                        <rows>8</rows>
                        <wysiwyg>true</wysiwyg>
                    </settings>
                </wysiwyg>
            </formElements>
        </field>
        <actionDelete sortOrder="50">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="componentType" xsi:type="string">actionDelete</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="fit" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string">Actions</item>
                    <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
                    <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete</item>
                </item>
            </argument>
        </actionDelete>
    </container>
</dynamicRows>

and it's showing like this.

But show/hide button not working, when we add two rows it's working perfectly with a single row

Answer 1

Most likely, you've got the same ID of toggle set on your WYSIWYG editors. Take a look at where the button is built in \Magento\Framework\Data\Form\Element\Editor, particularly where the element's ID is set:

protected function _getToggleButtonHtml($visible = true)
{
    $html = $this->_getButtonHtml(
        [
            'title' => $this->translate('Show / Hide Editor'),
            'class' => 'action-show-hide',
            'style' => $visible ? '' : 'display:none',
            'id' => 'toggle' . $this->getHtmlId(),
        ]
    );
    return $html;
}

The getHtmlID function is thus:

public function getHtmlId()
{
    $suffix = $this->getConfig('dynamic_id') ? '${ $.wysiwygUniqueSuffix }' : '';
        return parent::getHtmlId() . $suffix;
}

If you don't configure a Dynamic ID on your editor, then the editor's toggle button will have a generic ID of toggle, and you'll get undesired behavior if you have two identical IDs on the same page.

I'd try adding this to your wysiwygConfigData item:

<item name="dynamic_id" xsi:type="boolean">true</item>