fix(formplayer): prevent signature gestures from triggering swipes

formulus-formplayer/src/renderers/SignatureQuestionRenderer.test.tsx

@@ -1,7 +1,14 @@
 // @vitest-environment jsdom
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { JsonForms } from '@jsonforms/react';
 import Ajv from 'ajv';
 import SignatureQuestionRenderer, {
@@ -38,6 +45,30 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
+describe('signature drawing gestures', () => {
+  it('does not bubble touch gestures from the signature canvas', () => {
+    const onTouchStart = vi.fn();
+    const onTouchEnd = vi.fn();
+
+    const { container } = render(
+      <div onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
+        <Form value={{}} />
+      </div>,
+    );
+
+    const canvas = container.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+
+    fireEvent.touchStart(canvas!, {
+      touches: [{ clientX: 20, clientY: 20 }],
+    });
+    fireEvent.touchEnd(canvas!);
+
+    expect(onTouchStart).not.toHaveBeenCalled();
+    expect(onTouchEnd).not.toHaveBeenCalled();
+  });
+});
+
 describe('signature profile-safe preview', () => {
   it('resolves a migrated legacy basename through the bridge without changing stored data', async () => {
     const value = {

formulus-formplayer/src/renderers/SignatureQuestionRenderer.tsx

@@ -126,6 +126,7 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
         | React.TouchEvent<HTMLCanvasElement>,
     ) => {
       e.preventDefault();
+      e.stopPropagation();
       const point = getCanvasPoint(e);
       if (!point) return;
 
@@ -142,6 +143,7 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
         | React.TouchEvent<HTMLCanvasElement>,
     ) => {
       e.preventDefault();
+      e.stopPropagation();
       if (!isDrawingRef.current || !canvasRef.current) return;
 
       const point = getCanvasPoint(e);
@@ -164,10 +166,19 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
     [getCanvasPoint],
   );
 
-  const stopDrawing = useCallback(() => {
-    isDrawingRef.current = false;
-    lastPointRef.current = null;
-  }, []);
+  const stopDrawing = useCallback(
+    (
+      e:
+        | React.MouseEvent<HTMLCanvasElement>
+        | React.TouchEvent<HTMLCanvasElement>,
+    ) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isDrawingRef.current = false;
+      lastPointRef.current = null;
+    },
+    [],
+  );
 
   // Clear canvas
   const clearCanvas = useCallback(() => {