I have written a flow in which user data is sent to an external API and receives a multiple choice quiz back. The flow then takes that quiz and passes it to a screen with a custom aura component on it where the quiz is displayed as a series of radio groups.
The issue I am encountering is that when I try to interact with the radio groups, the first click on an option only brings it into focus and a second click is required to mark the option as selected. What needs to be done so that the radio groups will behave properly and indicate a selection after only a single click?
Component
<aura:component implements="lightning:availableForFlowScreens">
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="quizQuestions" type="QuizQuestion[]" />
<aura:attribute name="quizAnswers" type="QuizAnswer[]" />
<aura:iteration items="{!v.quizQuestions}" var="question">
<lightning:radioGroup
name="{!'Question ' + question.questionNumber}"
aura:id="{!'Question ' + question.questionNumber}"
label="{!question.questionText}"
options="{!question.questionChoices}"
value="{!question.selection}"
onchange="{!c.onQuizSelection}"
type="radio"/>
</aura:iteration>
</aura:component>
The quizQuestions attribute is an exposed input attribute that is initialized by an apex action just before this screen is displayed in the flow, while quizAnswers is an exposed output attribute for use later in the flow
Controller
({
init : function(component, event, helper) {
helper.formatQuizQuestions(component.get("v.quizQuestions"));
const answers = helper.generateQuizAnswers(component.get("v.quizQuestions"));
component.set("v.quizAnswers", answers);
},
onQuizSelection : function(component, event, helper) {
const answers = helper.generateQuizAnswers(component.get("v.quizQuestions"));
component.set("v.quizAnswers", answers);
}
})
Helper
({
formatQuizQuestions : function(quizQuestions) {
quizQuestions.forEach(
(question) => {
const { questionChoices } = question;
const formattedChoices = questionChoices.map(
(choice) => ({ label: choice.answerText, value: choice.answerNumber})
);
question.questionChoices = formattedChoices;
question.selection = 0;
}
);
},
generateQuizAnswers : function(quizQuestions) {
return quizQuestions.map(
(question) => ({ questionNumber: question.questionNumber, answerNumber: Number(question.selection) })
);
}
})