Issue with mouseleave event when holding mouse button down

[AlexOSunrise]

Desired behavior: When I hold the mouse button down for 3 seconds on an item, it enables "edit mode" where the items can be moved and resized (this works fine). When I hold the mouse button down on an item but move the cursor outside of that item, the timer should be cancelled and the application should not enter edit mode.

Actual behavior: This cancellation works only the first time I attempt it - after that, the mouseout/mouseleave events are not properly occurring. I tried this same thing without gridster involved at all and it worked as expected, so some aspect of gridster is blocking the ability of my code to detect mouseleave events.

Notes:
On second and subsequent tries, the cursor changes to the dragging hand, even though dragging is disabled and the item doesn't actually move at all. In stackblitz, this is instead a cursor that looks like a do not enter sign.
I implemented the dragStart callback and it is not called when this issue occurs, so gridster does not think I'm dragging the item.

Here's a stackblitz showing the issue - try holding on one of the boxes and then holding while moving the mouse out of the box. Then, try the same thing again (continue to hold the mouse outside of the box for at least 3 seconds). There will be no leave event, and edit mode will be entered (signified by the corner marking on the boxes).

https://stackblitz.com/edit/angular-ivy-enoxkf?devToolsHeight=33&file=src/app/grid/grid.component.ts

[AndeYashwanth]

@AlexOSunrise Using event.preventDefault(); along with event.stopImmediatepropogation(); in clickWidget() fixed the issue.

[AlexOSunrise]

Thank you!