Prevent drawer gesture on interactive elements
Browse filesTouch events on interactive elements (buttons, links, inputs) no longer trigger drawer opening gestures or prevent default behavior, improving usability and avoiding interference with native interactions.
src/lib/components/MobileNav.svelte
CHANGED
|
@@ -98,12 +98,18 @@
|
|
| 98 |
const drawerWidth = window.innerWidth * (drawerWidthPercentage / 100);
|
| 99 |
const touchOnDrawer = isOpen && touch.clientX < drawerWidth;
|
| 100 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 101 |
// Potential drag scenarios - never start isDragging until direction is locked
|
| 102 |
// Exception: overlay tap (no scroll content, so no direction conflict)
|
| 103 |
if (!isOpen && touch.clientX < 40) {
|
| 104 |
// Opening gesture - wait for direction lock before starting drag
|
| 105 |
-
// Prevent Safari's back navigation gesture on iOS
|
| 106 |
-
|
|
|
|
|
|
|
| 107 |
potentialDrag = true;
|
| 108 |
dragStartedOpen = false;
|
| 109 |
} else if (isOpen && !touchOnDrawer) {
|
|
|
|
| 98 |
const drawerWidth = window.innerWidth * (drawerWidthPercentage / 100);
|
| 99 |
const touchOnDrawer = isOpen && touch.clientX < drawerWidth;
|
| 100 |
|
| 101 |
+
// Check if touch is on an interactive element (don't block taps on buttons/links)
|
| 102 |
+
const target = e.target as HTMLElement;
|
| 103 |
+
const isInteractive = target.closest("button, a, input, [role='button']");
|
| 104 |
+
|
| 105 |
// Potential drag scenarios - never start isDragging until direction is locked
|
| 106 |
// Exception: overlay tap (no scroll content, so no direction conflict)
|
| 107 |
if (!isOpen && touch.clientX < 40) {
|
| 108 |
// Opening gesture - wait for direction lock before starting drag
|
| 109 |
+
// Prevent Safari's back navigation gesture on iOS (but not on interactive elements)
|
| 110 |
+
if (!isInteractive) {
|
| 111 |
+
e.preventDefault();
|
| 112 |
+
}
|
| 113 |
potentialDrag = true;
|
| 114 |
dragStartedOpen = false;
|
| 115 |
} else if (isOpen && !touchOnDrawer) {
|