[SalesForce] Summer ’18 Lightning checkbox values

I have noticed an issue with lightning checkboxes in Summer 18. When the user manually changes a checkbox, the v.value and v.checked attributes of the component are set to an empty string, instead of false/true. the following code demos this behaviour. This code works fine in Spring 18.

Component:

<aura:component >
<aura:attribute type="Boolean" name="booleanTest" />
<lightning:input aura:id="checkboxTest" type="checkbox" label="test" checked="{!v.booleanTest}" value="{!v.booleanTest}"/>
<lightning:button onclick="{!c.setTrue}" label="Set True"/>
<lightning:button onclick="{!c.showValue}" label="Show Value"/>
</aura:component>

Controller:

({
setTrue : function(component, event, helper) {
    component.set('v.booleanTest', true);
},

showValue : function(component, event, helper) {
    alert(component.find('checkboxTest').get('v.value') + ' :: ' + component.find('checkboxTest').get('v.checked'));
}
})
  • If the user clicks show value, it displays undefined :: undefined
  • If the user sets the checkbox and then clicks show value, it displays ::
  • If the user clicks set True and then clicks show value, it displays true :: true

Has any else seen this issue? Are there any mistakes in my test?

P.S My test was done using lightning out

    $Lightning.use("c:bootstrapApp", function() {

  $Lightning.createComponent("c:ret", {
  }, "container", function(cmp) { });
});

Best Answer

In Spring '18, checking the box results in a single event:

aura:valueChange
{
    "expression": "v.booleanTest",
    "value": true,
    "oldValue": false
}

In Summer '18, checking the box results in two events:

aura:valueChange
{
    "expression": "v.booleanTest",
    "value": true,
    "oldValue": ""
}
aura:valueChange
{
    "expression": "v.booleanTest",
    "value": "",
    "oldValue": true
}

It appears that they've fixed (or introduced) type validation. checked is a Boolean, while value is a String, so when you try to convert between the two, the result is that the values get wiped out.

Ideally, you should either not set value at all, or set it to a different, String attribute. Note that either way, value won't be updated when the box toggles; value was never meant to be used in this way anyways.

Related Topic