+ Start a Discussion
MarcelPMarcelP 

Summer 18: lightning:checkboxGroup does not update after underlying value is changed elsewhere

I have the following component:
<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.
Best Answer chosen by MarcelP
Ashwin Kumar SrinivasanAshwin Kumar Srinivasan
Hi,
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:if

Thanks,
Ashwin

All Answers

Ashwin Kumar SrinivasanAshwin Kumar Srinivasan
Hi,
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:if

Thanks,
Ashwin
This was selected as the best answer
MarcelPMarcelP
Thanks Ashwin! Great workaround.
AanchalAanchal
Thanks Ashwin. This worked.