3

I am extending the functionality of the lightning-datatable component and while trying to dispatch a CustomEvent I am receiving the following error:

TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.

This is the code I have, you would use lightning-datatable-extended as you normally use the lightning-datatable component.

import LightningDatatable from "lightning/datatable";

export default class LightningDatatableExtended extends LightningDatatable {

  boundHandledMouseUp = this.handleMouseUp.bind(this);

  constructor() {
    super();
    this.template.addEventListener("mouseup", this.boundHandledMouseUp);
  }

  handleMouseUp() {
    const myCustomEvent = new CustomEvent("myCustomEvent");
    this.dispatchEvent(myCustomEvent);
  }
}

UPDATE: I have found this closed issue in github, unfortunately it does not really contain an answer

2
  • It would be great if you also specified what you are trying to achieve with this code. Nov 23, 2020 at 13:24
  • Long story short, implenting a drag and drop functionality. I already have it working, but I had to use the fireEvent method of the pubsub service component, and I would prefer not to use it if possible (it should be possible since I only want to send the event to the parent component container) Nov 23, 2020 at 16:55

3 Answers 3

4

I hit this while extending LightningCheckboxGroup to make a new lwc "CheckboxGroupHorizontal". The only work around that worked for me was creating a new LWC called eventPasser:

eventPasser.js

// WORK AROUND for issue with LWC extending and legacy Lightning Locker (not LWS)
// https://github.com/salesforce/lwc/issues/3235 
import { api, LightningElement } from 'lwc';

export default class EventPasser extends LightningElement {

    @api 
    dispatchEventFromExtended(event) {
        this.dispatchEvent(event);
    }
}

eventPasser.html

<template></template>

I use it by adding it to the troubled lwc's html and replacing typical this.dispatchEvent js:

<c-event-passer></c-event-passer>
const passer = this.template.querySelector('c-event-passer');

passer.dispatchEventFromExtended(new CustomEvent('change', {
    bubbles: true,
    composed: true,
    detail,
}));
1
  • This is great. I had a similar problem. I was trying to create a toast from a modal and this solution worked perfectly.
    – Nick C
    Aug 10, 2023 at 2:31
2

Take a look at this link: https://github.com/salesforce/lwc/issues/1666

A case was opened to Salesforce support related to this issue and their reply was that extending another component aside from LightningElement is not currently supported in LWC's due to Lightning Locker Service preventing the extension.

That is a bit missguiding from their side though, since in order to use custom data types they suggest here to do exactly what they told you that was not supported:

Creating Custom Data Types

Create your own data types if you want to implement a custom cell, such as a delete row button or an image, or even a custom number display. Here's how you can create custom data types.

Extend the LightningDatatable class and define your custom types.

Create your templates to override the default.

Let's take a look at how we create a delete row button that appears on a column on each row. This button deletes the row and dispatches a custom event to signal the deletion.

1
  • GabrielSerranoSalas / @JamieSmith - when extends LightningDatatable there does not look to be solution achieving a dispatchEvent? Dec 11, 2023 at 12:42
0

Looks like you have a typo in your event.

Try changing dropRowEvent to "myCustomEvent" and retest.

import LightningDatatable from "lightning/datatable";

export default class LightningDatatableExtended extends LightningDatatable {
  boundHandledMouseUp = this.handleMouseUp.bind(this);
  constructor() {
    super();
    this.template.addEventListener("mouseup", this.boundHandledMouseUp);
  }

  handleMouseUp() {
    const myCustomEvent = new CustomEvent("myCustomEvent");
    this.dispatchEvent(myCustomEvent);
  }
}
1
  • you are right, I wrote the typo when writting the post, I will edit, but the error is still happening Nov 21, 2020 at 23:06

This site is temporarily in read-only mode and not accepting new answers.

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