[3.0.0-beta.32] Duplicating block issues with blocks field type

[joedawson]

Link to reproduction

No response

Describe the Bug

I have a couple of very basic blocks, not doing anything fancy. When I am duplicating any block, whilst it's duplicated, an additional duplicate also appears - however it is empty.

Any blocks that follow the duplicates, also have their state cleared. You can see in the video below, when I duplicate a block the extra duplicate appears as well as the original media block I add is also cleared.

However, not shown in the video, when I publish the value of the blocks re-appear.

Kapture_2024-05-14_at_18.17.22.webm

Here's my fields for reference:

{
  name: 'content',
  label: 'Content',
  type: 'blocks',
  blocks: [
    {
      slug: 'text',
      labels: {
        singular: 'Text',
        plural: 'Text',
      },
      fields: [
        {
          name: 'content',
          label: 'Content',
          type: 'textarea',
          required: true,
        },
      ],
    },
    {
      slug: 'media',
      labels: {
        singular: 'Media',
        plural: 'Media',
      },
      fields: [
        {
          name: 'media',
          label: 'Media',
          type: 'upload',
          relationTo: 'media',
          required: true,
        },
        {
          name: 'caption',
          label: 'Caption',
          type: 'text',
          admin: {
            description: 'Override the media caption (optional)',
          },
        },
      ],
    },
    {
      slug: 'post',
      labels: {
        singular: 'Post',
        plural: 'Posts',
      },
      fields: [
        {
          name: 'post',
          label: 'Post',
          type: 'relationship',
          relationTo: 'posts',
        },
      ],
    },
    {
      slug: 'quote',
      labels: {
        singular: 'Quote',
        plural: 'Quotes',
      },
      fields: [
        {
          name: 'quote',
          label: 'Quote',
          type: 'text',
          required: true,
        },
        {
          name: 'attribution',
          label: 'Attribution',
          type: 'text',
        },
      ],
    },
  ],
}

To Reproduce

• Create a blocks field on a collection
• Duplicate a block

Payload Version

3.0.0-beta.32

Adapters and Plugins

db-postgres, storage-s3, plugin-seo

[JarrodMFlesch]

@joedawson I am unable to reproduce this issue, I tried with both postgres and mongodb. Could you create a repo that I can clone down to ensure we are seeing the same thing? I would also try recreating this in the simplest collection you possibly can.

Thanks!

[joedawson]

@JarrodMFlesch thanks for the response. Not able to replicate it either after forking and copying over my collections (hooks included), config etc.

I just upgraded the project I worked on at the time of reporting this issue to the latest beta (3.0.0-beta.36) but the issue is still happening in my project.

It's worth noting, this does only appear to happen locally and not when deployed (I'm deploying to Vercel). I've also tried:

• Running payload migrate:fresh
• deleted all node_modules, lock files etc. and reinstalled everything
• deleted .next directory
• tested multiple browsers (cleared caches etc)

Anything else I can maybe try that I may have missed?

[JessChowdhury]

Hi @joedawson - I've tested this with version beta.32 as you reported and can confirm the behavior. However, this does appear to be resolved on the latest beta 3.0.0-beta.36.

Could I take a look at your package.json file?

A few things that would be worth a check:

• Are all Payload dependencies updated to 3.0.0-beta.36?
• Did you reinstall the dependencies after updating? pnpm i or yarn install
• Did you rebuild your project after updating?

If you are still seeing this bug in your project with 3.0.0-beta.36, please provide us with a stripped back version of your project to help us troubleshoot - essentially this is just a duplicate of your project removing anything sensitive or non-essential.

[joedawson]

Hey @JessChowdhury, thanks for taking a look at this issue. I have created a stripped back version of my project as requested here, which of course contains package.json etc: https://github.com/joedawson/block-duplicate-repro

To answer your questions:

• I followed the breaking changes in the 3.0.0-beta.36 release to bump all next, react dependencies etc. along with all payload 3.0.0-beta.36 dependencies.
• I use pnpm i to install/reinstall all dependencies
• If I build my application pnpm run build && pnpm run start - I do not experience the issue, however if I just run the dev server I do experience the issue pnpm run dev

In short, I experience the duplicate issue I originally reported only when running my dev server.

Let me know if you need any more details - thanks!

[JessChowdhury]

@joedawson thank you for the reproduction! I was finally able to recreate this bug by enabling reactStrictMode: true in the next.config.

Fix opened in this PR.