Checkboxes selection behavior in the dialog

[pixislinger]

Checkboxes in the dialog are getting selected/unselected while we click beside the boxes in the dialog rather than just getting selected within the checkboxes. Is this the usual behavior, I tried this in a few dialogs and replicated the same behavior 

[HARSH_TIWARI · Accepted solution]

@pixislinger I just checked and found that it will only happen till the text part of the checkbox, means only clickable to the area of text which we are using to name the field in dialog box.

I think this behavior is expected.

Thanks! 

[Rohan_Garg]

Hi @pixislinger,

Yes this is the expected behavior. If you see the screenshot below you will see the coral-checkbox element listener acts on both the coral checkbox label and the actual checkbox. 

Hope this helps!

[HrishikeshKa]

Hi @pixislinger ,

The behavior you're describing, where checkboxes in a dialog are getting selected or unselected when clicking beside the boxes rather than just within the checkboxes, is not typical expected behavior in AEM dialogs. This issue might be caused by the way the HTML and CSS are structured for the dialog or by an event handler that is being triggered improperly.

Here are a few steps to troubleshoot and resolve the issue:

1. Check the HTML Structure

Ensure that the HTML structure for the checkboxes is correct. The label elements should be correctly associated with the checkbox inputs.

Example of proper HTML for checkboxes:

<div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel">
        <input type="checkbox" name="myCheckbox" value="1" class="coral-Checkbox-input">
        <span class="coral-Checkbox-checkmark"></span>
        Option 1
    </label>
</div>

2. CSS Issues

Make sure there are no CSS styles that might be causing the entire label or surrounding area to be clickable. Ensure that the clickable area is only the checkbox or the label associated with it.

3. Event Handlers

Check if there are any JavaScript event handlers that might be causing this behavior. Ensure that there are no unintended event listeners that trigger the checkbox selection when clicking beside it.

4. AEM Dialog Configuration

Review the dialog configuration in your AEM component to ensure it is set up correctly. Below is an example of how a checkbox should be configured in a Coral 3 dialog.

Example of AEM dialog configuration:

<content jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <items jcr:primaryType="nt:unstructured">
        <myCheckbox jcr:primaryType="nt:unstructured"
            fieldLabel="Option 1"
            name="./option1"
            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox">
            <items jcr:primaryType="nt:unstructured"/>
        </myCheckbox>
    </items>
</content>

5. Check AEM Version and Compatibility

Ensure that your AEM instance is up-to-date with the latest service packs and cumulative fix packs. Sometimes, issues like these might be fixed in newer versions or patches.

6. Testing with Minimal Setup

Create a minimal dialog setup with just a single checkbox to see if the issue persists. This can help isolate whether the problem is with your specific dialog configuration or a broader issue.

Example minimal dialog setup:

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="My Component"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured"
             sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <myCheckbox jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                fieldLabel="Option 1"
                                name="./option1"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

7. Investigate Overlayed Components

If your project overlays or extends the default AEM components, ensure that these customizations are not causing the issue. Test with the default checkbox component to see if the problem persists.

Conclusion

The issue you are experiencing with the checkboxes might be due to improper HTML/CSS structure, event handling, or dialog configuration. By carefully reviewing and testing each aspect mentioned above, you should be able to pinpoint and resolve the issue, ensuring that checkboxes are only selectable when clicking directly on them or their associated labels.

[pixislinger]

thanks for the detailed explanation. Looks like there is a difference in my HTML structure compared to what you've posted. My input field is not inside the label. Any idea how to fix this?