Apex Code Development You need to sign in to do that
Don't have an account?
MarcelP Summer 18: lightning:checkboxGroup does not update after underlying value is changed elsewhere
I have the following component:
with the following controller:
When the button is clicked, v.value is updated and the new value is reflected in lightning:formattedNumber, but lightning:checkboxGroup does not update with the new value or sometimes updates incorrectly (apparently random options are selected). This used to work in Spring 18, but since Summer 18 it doesn't work for me, so I assume this is a bug.
<aura:component >
<aura:attribute name="options" type="List" default="[
{label: 'Opt 1', value: 'opt1'},
{label: 'Opt 2', value: 'opt2'},
{label: 'Opt 3', value: 'opt3'}
]"/>
<aura:attribute name="value" type="String[]"/>
<lightning:checkboxGroup
title="Group"
aura:id="mygroup"
name="checkboxGroup"
label="Checkbox Group"
options="{! v.options }"
value="{! v.value }" />
<lightning:formattedText value="{!'Checkbox group value: ' + v.value}"></lightning:formattedText>
<br/>
<lightning:button label="Select Opt 1 and Opt 3" onclick="{!c.selectOpt1AndOpt3}"/>
</aura:component>
with the following controller:
({
selectOpt1AndOpt3: function(component, event, helper) {
component.set("v.value", ['opt1', 'opt3']);
}
})
When the button is clicked, v.value is updated and the new value is reflected in lightning:formattedNumber, but lightning:checkboxGroup does not update with the new value or sometimes updates incorrectly (apparently random options are selected). This used to work in Spring 18, but since Summer 18 it doesn't work for me, so I assume this is a bug.
Yes you are right looks like summer 18, few other lightning components I had similar behaviour in Summer 18 where it did not refresh based on the bound attribute value change, you can try workaround like below until the issue is fixed.
<aura:attribute name="options" type="List" default="[ {label: 'Opt 1', value: 'opt1'}, {label: 'Opt 2', value: 'opt2'}, {label: 'Opt 3', value: 'opt3'} ]"/> <aura:attribute name="value" type="String[]"/> <aura:attribute name="_isChanged" type="Boolean" access="private" default="true"/> <aura:if isTrue="{!v._isChanged}"> <lightning:checkboxGroup title="Group" aura:id="mygroup" name="checkboxGroup" label="Checkbox Group" options="{! v.options }" value="{! v.value }" /> </aura:if> <lightning:formattedText value="{!'Checkbox group value: ' + v.value}"></lightning:formattedText> <br/> <lightning:button label="Select Opt 1 and Opt 3" onclick="{!c.selectOpt1AndOpt3}"/>({ selectOpt1AndOpt3: function(component, event, helper) { component.set("v._isChanged", false); component.set("v.value", ['opt1', 'opt3']); component.set("v._isChanged", true); } })It is not a great solution but for the time being it might work when we reinitialise the lightning:checkboxGroup buy toggling using aura:ifThanks,
Ashwin
All Answers
Yes you are right looks like summer 18, few other lightning components I had similar behaviour in Summer 18 where it did not refresh based on the bound attribute value change, you can try workaround like below until the issue is fixed.
<aura:attribute name="options" type="List" default="[ {label: 'Opt 1', value: 'opt1'}, {label: 'Opt 2', value: 'opt2'}, {label: 'Opt 3', value: 'opt3'} ]"/> <aura:attribute name="value" type="String[]"/> <aura:attribute name="_isChanged" type="Boolean" access="private" default="true"/> <aura:if isTrue="{!v._isChanged}"> <lightning:checkboxGroup title="Group" aura:id="mygroup" name="checkboxGroup" label="Checkbox Group" options="{! v.options }" value="{! v.value }" /> </aura:if> <lightning:formattedText value="{!'Checkbox group value: ' + v.value}"></lightning:formattedText> <br/> <lightning:button label="Select Opt 1 and Opt 3" onclick="{!c.selectOpt1AndOpt3}"/>({ selectOpt1AndOpt3: function(component, event, helper) { component.set("v._isChanged", false); component.set("v.value", ['opt1', 'opt3']); component.set("v._isChanged", true); } })It is not a great solution but for the time being it might work when we reinitialise the lightning:checkboxGroup buy toggling using aura:ifThanks,
Ashwin