RE: Radio buttons cannot be selected by clicking the label in modal dialogs

2024-09-12T17:43:53Z

Bug Report Created: https://liferay.atlassian.net/browse/LPD-36274

Radio buttons cannot be selected by clicking the label in modal dialogs

2024-08-15T11:26:50Z

I am trying to construct a simple feedback dialog with multiple options. It is rendered as expected, however, radio buttons can only be selected by clicking the button part, not the label.

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>

<div id="dialog" style="display: none">
    <aui:form>
        <div style="display: flex; margin-bottom: 2em">
            <aui:input type="radio" name="category" label="Satisfied" value="0"></aui:input>
            <aui:input type="radio" name="category" label="Incorrect" value="1"></aui:input>
            <aui:input type="radio" name="category" label="Incomplete" value="2"></aui:input>
            <aui:input type="radio" name="category" label="Unclear" value="3"></aui:input>
            <aui:input type="radio" name="category" label="Irrelevant" value="4"></aui:input>
            <aui:input type="radio" name="category" label="Other" value="5"></aui:input>
        </div>
        <aui:input type="textarea" name="feedback" label="Comments" resizable="false"></aui:input>
    </aui:form>
</div>

<clay:button id="feedback-button" icon="comments" label="Feedback" displayType="secondary" />

<script>

document.getElementById("feedback-button").addEventListener("click", () => {

    Liferay.Util.openModal({
        bodyHTML: document.getElementById("dialog").innerHTML,
        buttons: [
            {
                displayType: 'secondary',
                label: 'Cancel',
                type: 'cancel',
            },
            {
                displayType: 'primary',
                label: 'Submit',
                onClick: ({processClose}) => {
                    /* perform operation and then close dialog */
                    // TODO
                    processClose();
                },
            },
        ],
        title: "Feedback"
    })
})

</script>

As a workaround, I have the feedback code on a separate JSP page, which is loaded into dialog using Liferay.Util.openWindow() javascript method. However, this is suboptimal as I need to pass lots of render params to that page (and there is a risk some will be trimmed by URL length limitation), and also Cancel/Submit buttons are part of that page and do not stick at the bottom of the dialog.

I suppose there are other workarounds, but I expect the original approach should work as well.

LR 7.4.3.59