diff --git a/formulus-formplayer/src/renderers/SignatureQuestionRenderer.test.tsx b/formulus-formplayer/src/renderers/SignatureQuestionRenderer.test.tsx
index 554cd6d8a..efb7e7726 100644
--- a/formulus-formplayer/src/renderers/SignatureQuestionRenderer.test.tsx
+++ b/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(
+
+
+
,
+ );
+
+ 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 = {
diff --git a/formulus-formplayer/src/renderers/SignatureQuestionRenderer.tsx b/formulus-formplayer/src/renderers/SignatureQuestionRenderer.tsx
index 96070dd15..742eb5ea9 100644
--- a/formulus-formplayer/src/renderers/SignatureQuestionRenderer.tsx
+++ b/formulus-formplayer/src/renderers/SignatureQuestionRenderer.tsx
@@ -126,6 +126,7 @@ const SignatureQuestionRenderer: React.FC = ({
| React.TouchEvent,
) => {
e.preventDefault();
+ e.stopPropagation();
const point = getCanvasPoint(e);
if (!point) return;
@@ -142,6 +143,7 @@ const SignatureQuestionRenderer: React.FC = ({
| React.TouchEvent,
) => {
e.preventDefault();
+ e.stopPropagation();
if (!isDrawingRef.current || !canvasRef.current) return;
const point = getCanvasPoint(e);
@@ -164,10 +166,19 @@ const SignatureQuestionRenderer: React.FC = ({
[getCanvasPoint],
);
- const stopDrawing = useCallback(() => {
- isDrawingRef.current = false;
- lastPointRef.current = null;
- }, []);
+ const stopDrawing = useCallback(
+ (
+ e:
+ | React.MouseEvent
+ | React.TouchEvent,
+ ) => {
+ e.preventDefault();
+ e.stopPropagation();
+ isDrawingRef.current = false;
+ lastPointRef.current = null;
+ },
+ [],
+ );
// Clear canvas
const clearCanvas = useCallback(() => {