DOM values of existing Multifield Items changing after adding New

[troubleshooter3]

I have a custom tab in page properties where I have a multifield, the multifield consist of a coral-textfield which I convert to a coral-autocomplete through jquery on page load like below example :

    Coral.commons.ready(autocomplete, function () {
        autocomplete = new Coral.Autocomplete().set({
            placeholder: "place holder",
            name: "/xyz",
            match: "startswith",
            required: true,
            delay: 600
        });

This works quite well the first time despite I add one or 10 items and also saves my autocomplete data at ./xyz in JCR, my issue starts when I load the saved page property and try to add more items to existing multifield, the moment I click add, the name attribute of existing coral-autocomplete in existing multifield-item changes to something like ./xyz./xyz and value becomes empty, and existing fields despite having data shows required, in this whole scenario the newly added item remains correct, similary if I start with 2 and later add 3rd first 2 will get wrong name and value and soon as I click add button of multifield to add 3rd item.

I am on 6.5 and use coral UI3

[kautuk_sahni]

@mahi1729 @ManviSharma  Can you please review this Question and share your thoughts? 

[ManviSharma · Accepted solution]

Hi,

When initializing the Coral Autocomplete component, refrain from setting the name attribute to a generic value like "/xyz." Instead, employ a more unique and robust naming convention. Consider appending a unique identifier or counter to the name attribute, such as "/xyz_1," "/xyz_2," and so forth. This adjustment will help prevent conflicts with AEM's multifield naming conventions.

Coral.commons.ready(function () {
// Utilize a unique name attribute, e.g., /xyz_1, /xyz_2, etc.
var uniqueName = "/xyz_" + uniqueIdentifier;

var autocomplete = new Coral.Autocomplete().set({
placeholder: "place holder",
name: uniqueName,
match: "startswith",
required: true,
delay: 600
});
});

• Secondly, When loading the page properties dialog and populating the multifield with pre-existing data from the Java Content Repository (JCR), exercise care in setting the name attribute for each Coral Autocomplete field appropriately based on the data retrieved from the JCR.