Reordering Relations in Dynamic Zone cause blank screen

[kevinlaihk01]

Bug report

Required System information

• Node.js version: 16.17.0
• NPM version: 8.15.0
• Strapi version: 4.5.0
• Database: mysql v8
• Operating system: macOs 12.5

Describe the bug

When a Relation component is used in a Dynamic Zone, reordering the Relation component will lead to a blank screen with following error:

TypeError: i is not iterable

Steps to reproduce the behavior

1. create Relation component
2. create a Dynamic Zone which use that Relation component, and also any other component type
3. in Content Manager, reorder the added Relation component among other components in the same Dynamic Zone

Expected behavior

Reordering a Relation component in Dynamic Zone won't lead to a blank screen

Screenshots

Code snippets

suggest to change this line —

strapi/packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

Line 140 in b169f6f

set(draftState, initialDataPath, uniqBy([...value, ...initialDataRelations], 'id'));

from

        set(draftState, initialDataPath, uniqBy([...value, ...initialDataRelations], 'id'));

        set(draftState, initialDataPath, uniqBy([...value, ...(initialDataRelations || [])], 'id'));

So it wont spreading an undefined initialDataRelations (which its index in dynamic zone is changed) when reordering the Relation component

[joshuaellis]

I'm unable to reproduce this error. I would suggest you add a more detailed steps to reproduce so we can be more accurate in trying to replicate your conditions.

[hoggworks]

@joshuaellis This issue happens consistently to me when trying to re-order open components in the Dynamic Zone. Reordering works just fine when they're closed, but if you expand an item and then click either up or down buttons to reorder, you get the "not iterable" error.

[joshuaellis]

Can you share the schema of the two components & the content type in a minimal way so basically, just the comps and contents that make it break, i'll then try to reproduce on my side using those schemas because I just tried it again and still am not getting an error.

A video would be helpful too & more details i.e. how many components do you put in the dynamic zone and which ones? what data do you put in etc.

[hoggworks]

Can you share the schema of the two components & the content type in a minimal way so basically, just the comps and contents that make it break, i'll then try to reproduce on my side using those schemas because I just tried it again and still am not getting an error.

A video would be helpful too & more details i.e. how many components do you put in the dynamic zone and which ones? what data do you put in etc.

Absolutely! I'm new to strapi, is there a quick way to output my schema for you to see?

[joshuaellis]

Absolutely! I'm new to strapi, is there a quick way to output my schema for you to see?

Component schemas are in src/components/COMPONENT_GROUP/COMPONENT_NAME.json and schemas are in src/api/CONTENT_TYPE/content-types/CONTENT_TYPE/schema.json try to make those schemas as small as possible where they still reproduce the bug though, e.g. if your content type has 20 different text inputs but they're not needed in the schema for the bug to happen, then omit them 😄

[hoggworks]

I've got a single type "Main page" defined like this:

{
  "kind": "singleType",
  "collectionName": "main_pages",
  "info": {
    "singularName": "main-page",
    "pluralName": "main-pages",
    "displayName": "Main page",
    "description": ""
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {},
  "attributes": {
    "Title": {
      "type": "string"
    },
    "Header": {
      "type": "media",
      "multiple": true,
      "required": false,
      "allowedTypes": [
        "images",
        "files",
        "videos",
        "audios"
      ]
    },
    "Layout": {
      "type": "dynamiczone",
      "components": [
        "widgets.classes",
        "widgets.feature-sections",
        "widgets.wysiwyg-editor"
      ]
    }
  }
}

It references three components: Class, Announcements, Wsyiwyg Edtitor:

{
  "collectionName": "components_widgets_classes",
  "info": {
    "displayName": "Class",
    "icon": "arrow-alt-circle-up",
    "description": ""
  },
  "options": {},
  "attributes": {
    "class": {
      "type": "relation",
      "relation": "oneToOne",
      "target": "api::class.class"
    }
  }
}

{
  "collectionName": "components_widgets_feature_sections",
  "info": {
    "displayName": "Announcement",
    "icon": "american-sign-language-interpreting",
    "description": ""
  },
  "options": {},
  "attributes": {
    "announcements": {
      "type": "relation",
      "relation": "oneToMany",
      "target": "api::announcement.announcement"
    }
  }
}

{
  "collectionName": "components_widgets_wysiwyg_editors",
  "info": {
    "displayName": "Wysiwyg Editor"
  },
  "options": {},
  "attributes": {
    "richtext": {
      "type": "richtext"
    }
  }
}

This the is strapi version I'm using (just installed this week, so there's no old schema or data in place):

"dependencies": {
    "@strapi/strapi": "4.5.2",
    "@strapi/plugin-users-permissions": "4.5.2",
    "@strapi/plugin-i18n": "4.5.2",
    "better-sqlite3": "7.4.6"
  },

And here's a video reproduction of it:
https://user-images.githubusercontent.com/10200703/204032847-4b471905-dcf7-46d6-83a7-2690198b7f69.mov

Let me know if I can provide more info!