Two-Finger Touch on Waveform Blocks UI Interaction

[Shahid-Fahad]

Description
When interacting with the waveform using two fingers (not just pinch-zoom, just two touches), the entire UI becomes unresponsive to further touch interactions. This issue occurs even when touchAction is set to "none" or "pan-x pan-y", and event listeners are used to block multi-touch gestures.

import WaveSurfer from "wavesurfer.js";

const WaveformComponent = ({ audioUrl }) => {
  const waveformRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!waveformRef.current) return;

    const wavesurfer = WaveSurfer.create({
      container: waveformRef.current,
      waveColor: "violet",
      progressColor: "purple",
      barWidth: 2,
    });

    wavesurfer.load(audioUrl);

    return () => wavesurfer.destroy();
  }, [audioUrl]);

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

    const waveformElement = waveformRef.current;
    if (waveformElement) {
      waveformElement.addEventListener("touchstart", handleTouchStart, { passive: false });
    }

    return () => {
      if (waveformElement) {
        waveformElement.removeEventListener("touchstart", handleTouchStart);
      }
    };
  }, []);

  return (
    <div
      ref={waveformRef}
      style={{
        width: "100%",
        height: "300px",
        background: "var(--bg-secondary)",
        overflow: "hidden",
        touchAction: "none", // Disables browser's default multi-touch handling
      }}
    />
  );
};

export default WaveformComponent;

Maybe other users are also facing the same issue: #3833