function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ken Fitzpatrick 10Ken Fitzpatrick 10 

Having trouble with Lightning:Input Type="Radio" defaulting to the right button

I am building a group of radio buttons using an Aura:Iteration and Lightning:Input Type="Radio". I am setting checked to true on the default option for a particular profile. The one I want to check is being checked, but the first radio button is still highlighted. I am trying to figure out how to highlight the checked option instead of the first or at least just unhighlight the first.

Here is a screenshot showing what I am talking about:
User-added image

You can see the first option is highlighted, not the checked option.

I tried to use a Lighting:RadioGroup, but I can't get the descriptions below each option in a radio group, so I decided on the iteration and input. Here is my markup: 
<aura:iteration items="{!v.recordTypes}" 
				var="rType" 
				indexVar="idx">
	<lightning:input aura:id="rType_{!idx}" 
					 name="rTypeRadioGroup" 
					 type="radio" 
					 label="{!rType.name}" 
					 checked="{!rType.selected}" 
					 onchange="{!c.radioSelected}"/>
	<div class="slds-p-left_large">
		<div class="slds-p-left_large slds-text-heading_small">
			{!rType.description}
		</div>
	</div><br />
</aura:iteration>
Any ideas?

Thanks in advance!
 
ayu sharma devayu sharma dev
Hello Ken

Have you tried using the Focus method for lightning: input. Add this below line in your controller when you are marking a radio button True.
  
component.find("radioButtonId").getElement().focus();

Let me know if it works. If it does please mark this as the best answer so it will be helpful to others.

Thanks and Regards
Ayush Sharma
Ken Fitzpatrick 10Ken Fitzpatrick 10
Ayush, thank you for the response. Sorry for the late reply. So the issue is exactly that, one radio button is selected because it has focus, while the other is checked. Unfortunately, I am building the radio button list in the aura:iteration, so I cannot set the focus that time. I ultimately tried a bunch of things, like trying to set the focus when the iteration was completed, but could never get the focus on the selected option. I ended up scrapping the radio button list and going with dropdown list. I feel like the focus method does not work for that particular component.