Multifield dropdown in AEM 6.5 show hide

[SanketJa1]

<dummyMultifield
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
        composite="{Boolean}true">
    <field
            granite:class="cmp-teaser__editor-action"
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container"
            name="./dummyMultifield">
        <items jcr:primaryType="nt:unstructured">
           <text
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldLabel="Text"
                    name="./text"
                    required="{Boolean}true"
                    value="Temp"/>
            <dummyProgram
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/form/select"
                    class="cq-dialog-dropdown-showhide"
                    cq-dialog-dropdown-showhide-target=".other-showhide-target"
                    name="./dummyProgram"
                    fieldLabel="Dummy Program"
                    required="{Boolean}false">
                <items
                        jcr:primaryType="nt:unstructured">
                    <ABC
                            jcr:primaryType="nt:unstructured"
                            text="ABC"
                            value="abc"
                            selected="{Boolean}true"/>
                    <MNP
                            jcr:primaryType="nt:unstructured"
                            text="MNP"
                            value="mnp"/>
                    <XYZ
                            jcr:primaryType="nt:unstructured"
                            text="XYZ"
                            value="xyz"/>
                </items>
                <value>ABC</value>
            </dummyProgram>
            <dropdownProgram
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container"
                    class="hide other-showhide-target"
                    showhidetargetvalue="xyz">
                <items jcr:primaryType="nt:unstructured">

<type
granite:class="pdfviewer-type-selector"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Type"
name="./type">
<items jcr:primaryType="nt:unstructured">
    <fullWindow
            jcr:primaryType="nt:unstructured"
            text="Full Window"
            value="FULL_WINDOW"/>
    <sizedContainer
            jcr:primaryType="nt:unstructured"
            text="Sized Container"
            value="SIZED_CONTAINER"/>
    <inline
            jcr:primaryType="nt:unstructured"
            text="In-Line"
            value="IN_LINE"/>
</items>
</type>

 </items>
 </dropdownProgram>
 </items>
 </field>
</dummyMultifield>

Above is the XML code in AEM 6.5
When you select the XYZ dropdown then and only then dropdownProgram Dropdown should be visible and its working.
But what issue I'm facing is consider in 1st multifield you select the ABC dropdown, now click on add and 
to add the new multifield in that I will select XYZ dropdown so in that case dropdownProgram Dropdown is visble. 
but its also visble in first multifield dropdown where the select value is ABC. 

Could you help me to fix this

[pulkitvashisth · Accepted solution]

Hi @SanketJa1 

One possible solution could be to ensure that each dropdown selection only affects its own scope. This might involve adding a unique identifier to each multifield instance and ensuring that the show/hide functionality is tied to this identifier.

Here’s a general idea of how you might modify your code:

<dummyProgram
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/select"
    class="cq-dialog-dropdown-showhide"
    cq-dialog-dropdown-showhide-target=".other-showhide-target-{uniqueId}"
    name="./dummyProgram"
    fieldLabel="Dummy Program"
    required="{Boolean}false">
    ...
</dummyProgram>
<dropdownProgram
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide other-showhide-target-{uniqueId}"
    showhidetargetvalue="xyz">
    ...
</dropdownProgram>

In this example, {uniqueId} would be replaced with a unique identifier for each multifield instance. This way, the show/hide functionality would only affect the elements within the same multifield.

Here is a reference for an accepted solution for the same
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/show-hide-fields-based-on-...

[Raja_Reddy]

It seems like the issue is that the class attribute of the dropdownProgram field is set to "hide other-showhide-target", which is causing it to be hidden by default. However, when a new multifield is added and the dummyProgram field is changed to "XYZ", the class attribute of the dropdownProgram field is not updated to remove the "hide" class, causing it to remain visible even in the first multifield where the dummyProgram field is set to "ABC".

To fix this, you can add some JavaScript code to update the class attribute of the dropdown Program field whenever the dummyProgram field is changed. Here's an example of how you can do this:

$(document).on("change", "[name='./dummyProgram']", function() {
  var $dropdownProgram = $(this).closest(".coral-Form-fieldwrapper").find("[name='./dropdownProgram']");
  if ($(this).val() === "xyz") {
    $dropdownProgram.removeClass("hide");
  } else {
    $dropdownProgram.addClass("hide");
  }
});

This code listens for a change event on any dummyProgram field in the document, and then finds the corresponding dropdownProgram field using the closest and find methods. If the dummyProgram field's value is "xyz", it removes the "hide" class from the dropdownProgram field's class attribute, and if the value is anything else, it adds the "hide" class. This should ensure that the dropdownProgram field is only visible when the dummyProgram field's value is "xyz".

Thanks.