I'm using the lightning:input component with type="toggle" and have noticed that it accepts clicks outside the toggle button itself. For example, if I click to the left of the button and on the label, the value changes. I can also click to the right of the button on empty space (as far as the container goes I think) and the value will change.
Is there any way to change this component's behavior so that it accepts clicks on the toggle button only, and nowhere else?
Here's some sample code:
testLightningInput_App:
<aura:application >
<ltng:require styles="{!$Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"/>
<div class="(scope_name)-slds">
<c:testLightningInput />
</div>
</aura:application>
testLightningInput.cmp:
<aura:component >
<aura:attribute name="checked" type="Boolean" default="false"/>
<lightning:input name="toggle"
label="Toggle Label"
type="toggle"
checked="{!v.checked}"
onchange="{!c.handleToggleChanged}">
</lightning:input>
</aura:component>
testLightningInputController.js:
({
handleToggleChanged : function(component, event, helper) {
var checked = component.get("v.checked");
console.log("checked is now = " + checked);
}
})