To simplify things, lets call your LWC, component A, and your Aura component, component B.
Currently your components are independent, thus in tree terms, your component B (Aura) is not an ancestor of the component A (LWC).
There are two quick ways you could fire an event from component A (LWC) to component B (Aura)
1) Create a new Aura component that encapsulates component A (LWC). Component A then would fire a standard DOM event and the new Aura component would listen for the event and then re-fire the event as an application Aura event. Component B would then listen for the event and handle it. Something like this gist.
2) Create a child LWC component, call it componentC, in component B (Aura). Fire the event via pub-sub in component A (LWC). Then in componentC, listen and handle your event then re-fire it as a standard DOM event that would be handled by your Aura component, component B.
More resources:
Events in LWC,
Event Propagation,
Events from LWC -> Aura
I'm not 100% sure, but I believe the this
binding in your setTimeout needs to be explicitly set. Try this:
this.timeout = setTimeout(function() {
const selectedEvent = new CustomEvent('searchby', { detail: value || '' });
this.dispatchEvent(selectedEvent);
}.bind(this), 300);
The this
in this.dispatchEvent
should now refer to the component instead of the setTimeout context
Best Answer
I had this issue myself today as well. In my case, I had a Quick Action Lightning Aura Component which enveloped a Lightning Web Component (because there is currently no way of using a Lightning Web Component as a Quick Action)..
What I did is set up my Aura Component to catch 'close' events:
And process them with the events I would LIKE to throw from my Web Component:
And in my Web Component I throw the following Custom Event to trigger the refresh & quick action close:
I know it's ugly, but at the time of writing I don't think there's a better way to refresh an underlying record page & close a Quick Action modal from a Lightning Web Component.