Components with two or more Clone fields will overwrite with the last field

[vacas]

Summary

When we create a component with two or more Clone type components, the data from the first components get overwritten with the data from the last component.

Example

For this example, we created a Content Box (1), which is a WYSIWYG, and a Write In component (2), which is essentially a text field with a text area:
(1)

(2)

Now, here is the component with two Clone fields:

Here is the Two Column Container component created in a new page with the two clone fields using the initially mentioned components:

And here is the same Two Column Container component after it is published/updated in the same page:

Note

This example uses only two Clone field components for simplicity, but the same happens if you have more than two Clone field components. There are other components in this project, but none of them share the same name as any of the components mentioned in the example section.

[elliotcondon]

Hi @vacas

Thanks for the bug report.
Can you please export these field groups to a .json file and attach to your reply?

• I'll import these locally and perform some testing.

My first thought is that the field name's are overwriting each other in the DB, but will need to review the field settings / DB results to be sure.

[vacas]

Thanks for the quick reply, @elliotcondon!

Here are the fields:

acf-export-2018-05-07.json.zip

Since we've been working with the fields, I left the Three Column Container, instead of the Two Column Container from the previous example, but the result of the bug is still persisting, so this should work. I also included the other two components that is used within the example: the Content Box Component and the Write In Component. Lastly, there's another component I came up with that solves the problem for now, which is the Multiple Columns Container. Essentially, it's a repeater for Cloned components, just in case if you want to take a look into it.

Let me know if it works and if you need anything else!

[elliotcondon]

Hi @vacas

Thanks for the .json export, this made it possible to diagnose the issue.
The problem you are experiencing is simply due to multiple fields using the same "name" and therefore saving over each other in the DB.

The clone field contains an important setting called "Prefix Name". This is needed to modify the "name" or the cloned fields and allow them to save unequally.

Using the .json example provided, all 3 flexible content fields clones into the "Three Column Container" are saving to the DB with the same name. This is why they all load using the value of the last saved field.

Please read over the clone field documentation and make use of the "Prefix Name" setting for each clone field making sure the clone fields also contain a unique name.
https://www.advancedcustomfields.com/resources/clone/