5

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) { });
});
  • why have you set checked and value attribute same value. – Manjot Singh May 16 '18 at 13:38
  • to check both values. – Xander May 16 '18 at 13:40
4

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.

  • Updated test to not use value="" and it works as intended, thank you. This should have been documented in the Summer 18 notes (at least I couldn't find anything) – Xander May 16 '18 at 16:07
  • @Xander By the way, if you don't know about it, the Lightning Inspector is how I figured this out. – sfdcfox May 16 '18 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.