Media/relation inside a repeatable component disapears when saving

[willianrod]

Video demo

Recorded by @dogunbound
https://www.youtube.com/watch?v=j-TYly0s0L0

Bug report

Describe the bug

I'm using Strapi to build a customizable landing page with dynamic sections.

My current setup is this:

I have a component called SkillItem

➡️ src/components/utils/skill-item.json

{
  "collectionName": "components_utils_skill_items",
  "info": {
    "displayName": "SkillItem",
    "icon": "server"
  },
  "options": {},
  "attributes": {
    "name": {
      "type": "string"
    },
    "icon": {
      "allowedTypes": [
        "images"
      ],
      "type": "media",
      "multiple": false,
      "required": true
    },
    "since": {
      "type": "date",
      "required": true
    }
  }
}

I have another component called Skills with a items field with a repeatable SkillItem component

➡️ src/components/sections/skills.json

{
  "collectionName": "components_sections_skills",
  "info": {
    "displayName": "Skills",
    "icon": "brain",
    "description": ""
  },
  "options": {},
  "attributes": {
    "title": {
      "type": "string",
      "required": true
    },
    "items": {
      "type": "component",
      "repeatable": true,
      "component": "utils.skill-item",
      "required": true
    }
  }
}

And I have a Collection Type called Page where I have a Dynamic Zone with all my sections components.

➡️ src/api/page/content-types/page/schema.json

{
  "kind": "collectionType",
  "collectionName": "pages",
  "info": {
    "singularName": "page",
    "pluralName": "pages",
    "displayName": "Page",
    "description": ""
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {
    "i18n": {
      "localized": true
    }
  },
  "attributes": {
    "title": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string",
      "required": true
    },
    "slug": {
      "pluginOptions": {
        "i18n": {
          "localized": false
        }
      },
      "type": "string",
      "required": true,
      "unique": false
    },
    "description": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "text"
    },
    "sections": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "dynamiczone",
      "components": [
        "sections.welcome",
        "sections.about-me",
        "sections.work-experience",
        "sections.skills",
        "sections.goals"
      ]
    }
  }
}

When I'm editing my page and I have any items inside my skills section and I click on Save, my image disapears blocking me to publish my page, because strapi only allow me to publish if all required fields is filled.

If I edit an existing page and add a Skills section with an image inside an item, then save, then leave the page and come back to edit again, the image field is empty althouth this field has an value in my database.

Steps to reproduce the behavior

1. Go to Page
2. Create or edit a new one
3. Add a section of type Skills
4. Add a title
5. Add an item inside with an image and filling all required fields
6. Click Save
7. Image disapears (But is saved on database and API returns it)

Expected behavior

The image field should keep filled with my selected image.

I have another section with the same type of structure with an image and it behaves normally, looking for the difference between then I notice that the only diference is that in Skills I called the repeatable section as items, and the other section that works I called with social_media.

Renaming the items field inside Skills for any other name, makes my component behaves as expected.

Long story short, when I have a repeatable component called items with an media field inside, strapi resets that field on save.

Screenshots

System

• Node.js version: v16.13.1
• NPM version: 8.1.2
• Strapi version: 4.0.0
• Database: PostgreSQL
• Operating system: Windows with Ubuntu on WSL

Additional context

Add any other context about the problem here.

[MarcosGin]

I encountered this same error when we have a component at level 3.

LandingPage (component) -> QuoteSlider (component) -> Items -> (Component) -> media property

Reviewing the request to the backend a bit, it can be seen that at that level of iteration, the properties are not returned as multimedia

There is some fix for this?

[willianrod]

@MarcosGin as a workaround I changed the name of the array "items". In my case it seems to make the behavior go back to normal. Check if it works for in your case too

[kasonde]

Unable to reproduce in version 4.0.0 or in the latest version. Works as expected.

[talazenkot]

This still happens in 4.1.3

[derrickmehaffy]

Confirmed based on user reports and duplicate issues