Regions plugin with enableDragSelection on mobile (multi touch bug)

[rodsmyname]

Bug description

Simultaneous touches on the wavesurfer with the Regions plugin and enableDragSelection enabled will cause for multiple regions to appear simultaneously and create a region that cannot be removed.

Environment

• Browser: Chrome
• Mobile
• tested on android and iphone same outcome

Minimal code snippet

Preventing touch greater than 1 does not do anything to wavesurfer, I believe it was not designed with multi touch in mind so it does not respond well to it.

const handleTouchStart = (event) => {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
};

const handleTouchMove = (event) => {
  if (event.cancelable) {
    event.preventDefault();
  }
};

window.addEventListener("touchstart", handleTouchStart, { passive: false });
waveSurferRef.current.addEventListener("touchmove", handleTouchMove, {
  passive: false,
});

However the most pressing matter is that it ignores the following, with single touches or mouse clicks everything works perfectly fine (only one region can exist at a time), however with multi touch, multiple regions are created which should not be possible, and these regions for some reason cannot be deleted.

waveSurferInstance.current.on("dragstart", (start) => {
  wsRegions.getRegions().forEach((r) => {
    r.remove();
  });
})

Expected result

Only a single region should exist with the code above and multi touch should be disabled

Obtained result

Regions that cannot be deleted are created and wavesurfer regions does not handle multi touch well

Screenshots