0

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. – Renato Oliveira Nov 23 '20 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) – Gabriel Serrano Salas Nov 23 '20 at 16:55
1

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.

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 – Gabriel Serrano Salas Nov 21 '20 at 23:06

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.