Check if view_mode is 'preview' and don't render the accordion, don't render...

Check if view_mode is 'preview' and don't render the accordion, don't render the accordion in this view mode, because we don't have the item.target_id available while creating Paragraphs (by Ajax, for eg. in Layout Paragraphs)

modules/drowl_paragraphs_types/templates/paragraph--drowl-paragraphs-types--container-tabs-accordion.html.twig

@@ -35,34 +35,42 @@
 {% endif %}
 
 {% block paragraph %}
-    {{ attach_library('drowl_paragraphs_types/containers') }}
-    {{ attach_library('webksdct/foundation.responsiveAccordionTabs') }}
-    <div{{ attributes.addClass(classes).setAttribute('id', 'tab-outer-wrapper-' ~ paragraph.id()) }}>
-        <ul{{ tab_acc_attributes.addClass(tab_acc_classes) }} id="tab-wrapper-{{ paragraph.id() }}" data-responsive-accordion-tabs="{{ tab_acc_data_conf }}" data-deep-link="true">
-            {% for key, item in content.field_paragraphs_paragraphs['#items'] %}
-                {% set tab_icon = drupal_field('field_paragraphs_icon', 'paragraph', item.target_id) %}
-                {% set tab_label = drupal_field('field_paragraphs_title', 'paragraph', item.target_id) %}
-                {% set tab_custom_id = drupal_entity('paragraph', item.target_id)['#paragraph'].field_paragraphs_anchor_id.value %}
-                <li class="tabs-title{% if paragraph.field_paragraphs_init_opened_tab.value and paragraph.field_paragraphs_init_opened_tab.value == loop.index %} is-active{% endif %}">
-                    <a href="{% if tab_custom_id %}#{{ tab_custom_id }}{% else %}#tab-pane-{{ item.target_id }}{% endif %}"{% if loop.first %} aria-selected="true"{% endif %}>
-                      {% if tab_icon %}
-                        {{ tab_icon }}
-                      {% endif %}
-                      {{ tab_label }}
-                    </a>
-                </li>
-            {% endfor %}
-        </ul>
-        <div class="tabs-content" data-tabs-content="tab-wrapper-{{ paragraph.id() }}">
-            {% block content %}
-                {% for key, item in content.field_paragraphs_paragraphs['#items'] %}
-                    {% set tab_custom_id = drupal_entity('paragraph', item.target_id)['#paragraph'].field_paragraphs_anchor_id.value %}
-                    <div class="tabs-panel tabs-panel--spaceless{% if paragraph.field_paragraphs_init_opened_tab.value and paragraph.field_paragraphs_init_opened_tab.value == loop.index %} is-active{% endif %}"
-                         id="{% if tab_custom_id %}{{ tab_custom_id }}{% else %}tab-pane-{{ item.target_id }}{% endif %}">
-                        {{- content.field_paragraphs_paragraphs[key] -}}
-                    </div>
-                {% endfor %}
-            {% endblock content %}
-        </div>
+    {% if view_mode == 'preview' %}
+      {#
+        Dont' remove this preview check - otherwise you will run into layout pragraphs issues, see:
+        https://www.drupal.org/project/drowl_paragraphs/issues/3228383
+      #}
+      {{ content }}
+    {% else %}
+      {{ attach_library('drowl_paragraphs_types/containers') }}
+      {{ attach_library('webksdct/foundation.responsiveAccordionTabs') }}
+      <div{{ attributes.addClass(classes).setAttribute('id', 'tab-outer-wrapper-' ~ paragraph.id()) }}>
+          <ul{{ tab_acc_attributes.addClass(tab_acc_classes) }} id="tab-wrapper-{{ paragraph.id() }}" data-responsive-accordion-tabs="{{ tab_acc_data_conf }}" data-deep-link="true">
+              {% for key, item in content.field_paragraphs_paragraphs['#items'] %}
+                  {% set tab_icon = drupal_field('field_paragraphs_icon', 'paragraph', item.target_id) %}
+                  {% set tab_label = drupal_field('field_paragraphs_title', 'paragraph', item.target_id) %}
+                  {% set tab_custom_id = drupal_entity('paragraph', item.target_id)['#paragraph'].field_paragraphs_anchor_id.value %}
+                  <li class="tabs-title{% if paragraph.field_paragraphs_init_opened_tab.value and paragraph.field_paragraphs_init_opened_tab.value == loop.index %} is-active{% endif %}">
+                      <a href="{% if tab_custom_id %}#{{ tab_custom_id }}{% else %}#tab-pane-{{ item.target_id }}{% endif %}"{% if loop.first %} aria-selected="true"{% endif %}>
+                        {% if tab_icon %}
+                          {{ tab_icon }}
+                        {% endif %}
+                        {{ tab_label }}
+                      </a>
+                  </li>
+              {% endfor %}
+          </ul>
+          <div class="tabs-content" data-tabs-content="tab-wrapper-{{ paragraph.id() }}">
+              {% block content %}
+                  {% for key, item in content.field_paragraphs_paragraphs['#items'] %}
+                      {% set tab_custom_id = drupal_entity('paragraph', item.target_id)['#paragraph'].field_paragraphs_anchor_id.value %}
+                      <div class="tabs-panel tabs-panel--spaceless{% if paragraph.field_paragraphs_init_opened_tab.value and paragraph.field_paragraphs_init_opened_tab.value == loop.index %} is-active{% endif %}"
+                          id="{% if tab_custom_id %}{{ tab_custom_id }}{% else %}tab-pane-{{ item.target_id }}{% endif %}">
+                          {{- content.field_paragraphs_paragraphs[key] -}}
+                      </div>
+                  {% endfor %}
+              {% endblock content %}
+          </div>
     </div>
+    {% endif %}
 {% endblock paragraph %}