3

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
  • 1
    i dont think type is required or supported here, the component documentation is pretty straightforward developer.salesforce.com/docs/component-library/bundle/…
    – glls
    Commented Jan 14, 2022 at 18:07
  • 1
    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
    Commented Jan 14, 2022 at 18:07
  • 1
    P.S. Your screencast is private, you may need to update the permissions on the file.
    – sfdcfox
    Commented Jan 14, 2022 at 19:04
  • 1
    Can you check if there is another radiogroup with same "name"
    – Elijah
    Commented Jan 17, 2022 at 14:14

1 Answer 1

6

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'}
    ];
1
  • 1
    yes! I accidently put boolean values instead of string, thank you!
    – Json
    Commented Jun 3, 2022 at 16:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .