6

I am receiving two events when I am clicking lightning-input checkbox. This behavior is the same in Salesforce as well as on the LWC playground.

Wherever if use html checkbox then I receive event only one time.

Anyone else is having the same problem? Here is the code in LWC playground: https://developer.salesforce.com/docs/component-library/tools/playground/lsOssohh3/2/edit

2

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

0
handleBulletPointsInput2(e){
    e.preventDefault();
    console.log('--handleBulletPointsInput21--');
}
  • Please add some explanation to provide context. Code only answers are typically viewed as low quality and often deleted. – Adrian Larson Oct 15 at 14:51

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.