1

I have a radio-button-group in a Lightning Web Component that is being used in a modal. When I click on an option once, it only does the focus (blue circle around the button). Only on the second click does it fill the option in with the blue dot. This is a 3-second screen recording of what is happening.

I have tried: (a) removing the "label-hidden" variant; (b) wrapping the lightning-radio-group within <form></form> tags; (c) changing the name property. None of these worked. And the lightning-input documentation says: "Use lightning-radio-group instead of input type radio for radio buttons." Any thoughts?

HTML Markup:

                    <p>{labels.Document_Upload_Final_Item_Line_2}</p>
                        <lightning-radio-group
                                name="finalVersionGroup"
                                label="Final Version?"
                                value={finalVersion}
                                options={options}
                                onchange={handleChange}
                                variant="label-hidden"
                                type="radio"
                                required>
                        </lightning-radio-group>

Javascript: These are the relevant parts of the js for the lightning-radio-group. Happy to post more if that would help.

export default class PortalDocumentUpload extends LightningElement {
    finalVersion;
    includesQEP;
    options = [
        {label : 'Yes', value : true},
        {label : 'No', value : false}
    ];

    handleChange(event) {
        this.finalVersion = event.target.value;
    }
4
  • i dont think type is required or supported here, the component documentation is pretty straightforward developer.salesforce.com/docs/component-library/bundle/…
    – glls
    Jan 14 at 18:07
  • Welcome to Salesforce Stack Exchange (SFSE)! Did you read this Q&A first to see if it answered your question? If you read it and it did not help, it is a good idea to mention that in the "I tried"/research part of your question so potential helpers know.
    – Moonpie
    Jan 14 at 18:07
  • P.S. Your screencast is private, you may need to update the permissions on the file.
    – sfdcfox
    Jan 14 at 19:04
  • Can you check if there is another radiogroup with same "name"
    – Elijah
    Jan 17 at 14:14

1 Answer 1

1

There are always two reasons, if you have to click multiple times to select the radio button.

  1. name you are using for your radio group is not unique, there is another radio group with same name.

  2. Values that you are returning for radio groups are not String. Radio group work with String.

In your case I see you are returning boolean values that is causing the problem.

Change your options as below :

options = [
        {label : 'Yes', value : 'true'},
        {label : 'No', value : 'false'}
    ];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.