LWC / JS - event.stopPropagation() causing error - [event.stopPropagation is not a function]

Question

I got this error in the view [event.stopPropagation is not a function]

This is the code triggering this error

commentHandleChange(event){
  let selectedValue = 'Pitched';
  this.handleStatusChange({ detail: { value: selectedValue } });

handleStatusChange(event) {
  event.stopPropagation();

I've inherited a very complex legacy LWC implementation. event.stopPropogation is used a number of times throughout the JS file, so I don't just want to comment out this line.

Meanwhile I'm reading up on stopPropogation, but I'm fairly new to events and bubbling, so it's not making much sense yet.

Answer 1

handleStatusChange isn't being called with an event, so the method doesn't exist here.

this.handleStatusChange({ detail: { value: selectedValue } });

Is just calling the method without a "real" event. If you want to maintain that logic, which is reasonable, just add your own method:

this.handleStatusChange({ 
  detail: { value: selectedValue }, 
  stopPropagation: () => {} 
});

This will do nothing special in this code (()=>{}) is just a do-nothing function), but will allow that method to actually stop propagation when handling a real event.