6

I know lightning:input is in beta, but am curious if other people have noticed this behavior, and if this is a known issue/bug?

When I use lightning:input with value references to attributes, type="String" (or text) updates the attribute, but type="toggle" does not. Other types might also not update the attribute, I haven't checked all the other types.

Using the below sample code, when I type into the input field, I see the console log updated with each keypress. But when I click the toggle, nothing is logged.

Perhaps this is just growing pains of lightning:input being in beta?

App (testFieldUpdate_App):

<aura:application >
    <ltng:require styles="{!$Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"/>

    <div class="xxxxxxx-slds">
        <c:testFieldUpdate/>
    </div>
</aura:application>

Component (testFieldUpdate):

<aura:component >
    <aura:attribute name="caseNumber"           type="String"/>
    <aura:attribute name="toggleCaseEscalation" type="Boolean"/>

    <aura:handler name="change"  action="{!c.caseNumberChanged}"           value="{!v.caseNumber}"/>
    <aura:handler name="change"  action="{!c.toggleCaseEscalationChanged}" value="{!v.toggleCaseEscalation}"/>

    <lightning:input name="inputCaseNumber"
                     aura:id="inputCaseNumber"
                     type="String"
                     label="Case Number"
                     value="{!v.caseNumber}"/>

    <lightning:input name="inputToggleCaseEscalation"
                     aura:id="inputToggleCaseEscalation"
                     type="toggle"
                     label="Toggle Case Escalation"
                     value="{!v.toggleCaseEscalation}"/>

</aura:component>

Component controller (testFieldUpdateController):

({
    caseNumberChanged : function(component, event, helper) {
        console.log("DEBUG: (testFieldUpdateController.caseNumberChanged) caseNumber changed; new value = " + component.get("v.caseNumber"));
    },

    toggleCaseEscalationChanged : function(component, event, helper) {
        console.log("DEBUG: (testFieldUpdateController.toggleCaseEscalationChanged) toggleCaseEscalation changed; new value = " + component.get("v.toggleCaseEscalation"));
    },

})

(end of post)

5

The below worked for me .The issue was that the value has to be binded to the checked attribute for toggle, checkbox and radio buttons

<aura:component >
<aura:attribute name="toggleCaseEscalation" type="Boolean"/>

<aura:handler name="change" value="{!v.toggleCaseEscalation}" action="{!c.toggleCaseEscalationChanged}"/>

<lightning:input name="inputToggleCaseEscalation"
                 aura:id="inputToggleCaseEscalation"
                 type="toggle"
                 label="Toggle Case Escalation"
                 checked="{!v.toggleCaseEscalation}" />
 </aura:component>

The JS controller for the same

({
    toggleCaseEscalationChanged : function(component, event, helper) {
      console.log('VALUE..'+component.find("inputToggleCaseEscalation").get("v.checked"));//Another way to capturing the value via an Id .
      console.log(component.get("v.toggleCaseEscalation"));
      console.log("DEBUG: (testFieldUpdateController.toggleCaseEscalationChanged) toggleCaseEscalation changed; new value = " + component.get("v.toggleCaseEscalation"));
  }

})

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.