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

1 Answer 1

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.

2
  • 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
    Commented May 16, 2018 at 16:07
  • @Xander By the way, if you don't know about it, the Lightning Inspector is how I figured this out.
    – sfdcfox
    Commented May 16, 2018 at 16:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .