Skip to content

Commit d4092ea

Browse files
committed
Fix event handling to preserve touch click events
Removed preventDefault() from pointer and touch event handlers in CounterRotateContainer to ensure buttons remain functional on mobile and tablet devices. Now only stopPropagation() is used to prevent event propagation without interfering with native click generation.
1 parent 45eb82c commit d4092ea

File tree

2 files changed

+14
-3
lines changed

2 files changed

+14
-3
lines changed

.changeset/stale-doodles-send.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@embedpdf/utils': patch
3+
---
4+
5+
Removed preventDefault() from pointer and touch event handlers in CounterRotateContainer to ensure buttons remain functional on mobile and tablet devices. Now only stopPropagation() is used to prevent event propagation without interfering with native click generation.

packages/utils/src/shared/components/counter-rotate-container.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,25 @@ export function CounterRotate({ children, ...props }: CounterRotateComponentProp
2525
const { matrix, width, height } = getCounterRotation(rect, rotation);
2626
const elementRef = useRef<HTMLDivElement | null>(null);
2727

28-
// Use native event listeners with capture phase to prevent text selection
28+
// Use native event listeners with capture phase to prevent event propagation
2929
useEffect(() => {
3030
const element = elementRef.current;
3131
if (!element) return;
3232

3333
const handlePointerDown = (e: Event) => {
34+
// Stop propagation to prevent underlying layers from receiving the event
3435
e.stopPropagation();
35-
e.preventDefault();
36+
// DO NOT use e.preventDefault() here - it breaks click events on mobile/tablet!
37+
// preventDefault() stops the browser from generating click events from touch,
38+
// which makes buttons inside this container non-functional on touch devices.
3639
};
3740

3841
const handleTouchStart = (e: Event) => {
42+
// Stop propagation to prevent underlying layers from receiving the event
3943
e.stopPropagation();
40-
e.preventDefault();
44+
// DO NOT use e.preventDefault() here - it breaks click events on mobile/tablet!
45+
// preventDefault() stops the browser from generating click events from touch,
46+
// which makes buttons inside this container non-functional on touch devices.
4147
};
4248

4349
// Use capture phase to intercept before synthetic events

0 commit comments

Comments
 (0)