lightning-input firing two onclick events in Lightning Web Component
From the specification of lightning-input, it looks like there is no native onclick
event.
Its recommended that you should be using onchange
instead.
HTML:
<template>
<lightning-input type="checkbox" label="Lightning Checkbox" onchange={handleBulletPointsInput2}>
</lightning-input>
<input type="checkbox" onclick={handleBulletPointsInput2}>HTML Checkbox</input>
</template>
Js:
import { LightningElement } from 'lwc';
export default class InputCheckboxBasic extends LightningElement {
handleBulletPointsInput2(){
console.log('--handleBulletPointsInput21--');
}
}
Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/lsOssohh3/5/edit
Reason why its firing two events onclick:
In normal html-checkbox, the check uncheck only work when you click on the checkbox.
In lightning-input
the check-uncheck work even on click of Label. Both checkbox and label react to click as they both are children of div/span that handles the onclick event and propagates it down to all reactive children