V4 / Dynamic zone accordion to be opened

igormariuta · April 20, 2022, 10:30am

Hi, is there a way for Dynamic Zone accordion to be opened by default ? I didn’t found anything about that in documentation. Thank you.

starrett67 · July 7, 2022, 5:56pm

This is hard coded in the source code right now. I used the patch-package npm module to fix it.

Source you gotta patch:

github.com

strapi/strapi/blob/master/packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js#L20

    
      
          import select from './utils/select';
          import AddComponentButton from './components/AddComponentButton';
          import DzLabel from './components/DzLabel';
          import Component from './components/Component';
          
          
import ComponentPicker from './components/ComponentPicker';
          
          
/* eslint-disable react/no-array-index-key */
          
          
const createCollapses = arrayLength =>
            Array.from({ length: arrayLength }).map(() => ({ isOpen: false }));
          
          
const DynamicZone = ({
            name,
            // Passed with the select function
            addComponentToDynamicZone,
            formErrors,
            isCreatingEntry,
            isFieldAllowed,
            isFieldReadable,
            labelAction,

tylerpaige · August 17, 2022, 7:14pm

Thanks for your advice @starrett67! For any of those who try this on the local install, don’t forget to strapi build your admin panel again for the change to take effect. It took me a minute of head scratching to remember that step

buddahbot · July 11, 2024, 12:35pm

this solution doesn’t work in the latest version 4.25. Anyone know how do have the dynamic zone opened by default so the user can see straight away that a component needs to be selected. It should look just like the image OP posted above.