2

According to the documentation on event dispatching event types should follow these rules:

  • No uppercase letters
  • No spaces
  • Use underscores to separate words

When I attempt to use underscores in my event type I don't seem to be able to handle it.

Dispatcher:

<lightning-button label="Update" onclick={toggleEditAsset}></lightning-button>

toggleEditAsset = () => {
    const event = new CustomEvent('toggle_edit_asset');
    this.dispatchEvent(event);
}

Handler:

<c-asset-information asset={model.asset} edit-asset={editAsset} ontoggleeditasset={handleToggleEditAsset}></c-asset-information>

handleToggleEditAsset() {
    this.editAsset = !this.editAsset
    console.log('toggle');
}

This handler does not get called.

If I try to change ontoggleeditasset to ontoggle_edit_asset I get an error

LWC1056: Invalid event name ontoggle_edit_asset. Event name can only contain lower-case alphabetic characterslwc

If I change the event to toggleeditasset everything works fine

What is the proper markup to handle an event with underscores?

2
  • Why don't you just leave it as const event = new CustomEvent('toggleeditasset'); That should work and you don't need to worry about anything else.
    – Nico W
    Aug 21, 2019 at 13:03
  • I wanted to follow best practices where it says Use underscores to separate words. I'm aware I can do that, but I was more curious about how to do it the way the documentation says to do it Aug 21, 2019 at 16:01

1 Answer 1

4

If you want to handle an event type sampleevent in HTML of parent, you should directly add prefix in attribute onsampleevent.

But, You cannot add event handler in HTML with underscores _ as it will not compile.

However, you can do it through JS of parent component:

I would recommend not to create event-types with underscores as it may not even be supported from javascript in future releases (although currently it is able to handle)

connectedCallback() {
    this.template.addEventListener('toggle_edit_asset', this.handleToggle);
}
handleToggle(e) {
    console.log('toggle_edit_asset handled');
}

This is Playground link

This will work but you will be getting warning in the console as below:

[LWC warning]: Invalid event type "toggle_edit_asset" dispatched in element . Event name should only contain lowercase alphanumeric characters.

IMPORTANT

You need to add bubbles:true in event as you need to Bubble an event up inside the containing component’s template.

toggleEditAsset = () => {
    const event = new CustomEvent('toggle_edit_asset', { bubbles: true });
    this.dispatchEvent(event);
};
10
  • Can you help me debug this playground link? apparently dispatcher is not letting me fire event. developer.salesforce.com/docs/component-library/tools/… Aug 20, 2019 at 17:59
  • According to best practices, bubbling should not be used developer.salesforce.com/docs/component-library/documentation/… Aug 20, 2019 at 17:59
  • what we are doing is bubbles:true, composed:false - this will not become public API Aug 20, 2019 at 18:01
  • @PranayJaiswal, you cannot have attribute with underscores in HTML, so you need to implement in JS. For this you need bubbles. Modified these in your playground link. Aug 20, 2019 at 18:06
  • Right but according to the docs neither bubbling nor composed should be used. I see examples everywhere of people still using them though. It seems like the documentation is wrong for some of these event examples Aug 20, 2019 at 18:07

You must log in to answer this question.

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