PixiJS - Not all touchend events triggering (outside of displayObject) - pixi.js

Question

Pixijs (3.0.8) supports multi-touch as shown in their demos, and I've set up start, move and end listeners for touches on my mobile device.
The touches are registered on a square within the canvas which I'll call the interactiveArea, but the touchend events trigger when let go outside of the area as well. This is behavior that works fine with a single mouse cursor.
However, when using more fingers, having touches with the identifiers 0,1 and 2, only the first touchEnd is triggered outside of the area.
So I press and hold 3 fingers inside the interactiveArea and move them all outside of it. Then I let go of 1, and then the others. I won't be notified of touchEnds for event 0 and 2, and I'd have to re-register 3 touches and let go properly just to get a touchend for 2 triggered!
Any tips on how I can detect all touchends, rather than have it stop on the first touchend? I've tried working with a setTimeout hack as well, but that really doesn't suit my use case.
Edit I've made a basic codepen to demonstrate how touchendoutside is only triggered once. https://codepen.io/Thomaswithaar/pen/EygRjM Do visit the pen on mobile, as it is about touches rather than mouse interactivity.
Holding two fingers on the red square and then moving them out and letting go will only trigger one touchendoutside event.

Answer 1

Looking at the PIXI source code, there is indeed a bug in the Interaction Manager. Here is the method that processes touch end events:
InteractionManager.prototype.processTouchEnd = function ( displayObject, hit )
{
if(hit)
{
this.dispatchEvent( displayObject, 'touchend', this.eventData );
if( displayObject._touchDown )
{
displayObject._touchDown = false;
this.dispatchEvent( displayObject, 'tap', this.eventData );
}
}
else
{
if( displayObject._touchDown )
{
displayObject._touchDown = false;
this.dispatchEvent( displayObject, 'touchendoutside', this.eventData );
}
}
};
You can see in the else statement that a touchendoutside event gets dispatched when displayObject._touchDown is true. But after you release your first finger, it sets the flag to false. That is why you only receive that event once.
I've opened an issue here:
https://github.com/pixijs/pixi.js/issues/2662
And provided a fix here:
https://github.com/karmacon/pixi.js/blob/master/src/interaction/InteractionManager.js
This solution removes the flag and uses a counter instead. I haven't tested it yet, so please let me know if it works.