ing-dialog doesnt close when you dispatch close event from a callback

[Hazzle]

Expected behavior

Closing of overlay after dispatching event from a callback method.

Actual Behavior

Close overlay event isnt picked up when dispatched from a callback method.

Additional context

ing-web version: 4.0.0 components used: ing-dialog, ing-dialog-frame, ing-button

from dialog: <ing-button id="cancelBtn" grey @click="${(e: Event) => this.closeModal(e)}">Cancel</ing-button>

works: private closeModal(e: Event) { e.target?.dispatchEvent(new Event('close-overlay', { bubbles: true })); }

doesnt work: private closeModal(e: Event) { setTimeout(() => e.target?.dispatchEvent(new Event('close-overlay', { bubbles: true }))); }

I added a timeout for demonstrative purposes, the same issue occurs from a promise (actual usecase).

[LarsDenBakker]

@Hazzle e.target has a different value when you access it directly in the event handler, or when it is accessed later. This is because the event continues to traverse up the tree. So by the team you dispatch your event, the target will be another element up the DOM tree.

You can store the target:

private closeModal(e: Event) { 
  const target = e.target;
  setTimeout(() => target?.dispatchEvent(new Event('close-overlay', { bubbles: true }))); 
}

[Hazzle]

Thanks, it works.