From e5135b182a6564e6201d4a13146ebd19d39f6958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Fri, 22 Dec 2023 14:18:32 +0100
Subject: [PATCH] fix(editor): Prevent browser zoom when scrolling inside
 sticky edit mode (#8116)

## Summary
Fixes a bug where zooming inside a sticky edit mode would trigger
browser zoom. Instead, triggers regular canvas zoom.


## Related tickets and issues
Fixes ADO-1581


## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.
---
 .../design-system/src/components/N8nSticky/Sticky.vue     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nSticky/Sticky.vue b/packages/design-system/src/components/N8nSticky/Sticky.vue
index fc83e4d9db610..70cf5983dbe26 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.vue
+++ b/packages/design-system/src/components/N8nSticky/Sticky.vue
@@ -36,7 +36,6 @@
 				@mouseup.stop
 				@keydown.esc="onInputBlur"
 				@keydown.stop
-				@wheel.stop
 				:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
 			>
 				<n8n-input
@@ -45,6 +44,7 @@
 					:rows="5"
 					@blur="onInputBlur"
 					@update:modelValue="onUpdateModelValue"
+					@wheel="onInputScroll"
 					ref="input"
 				/>
 			</div>
@@ -180,6 +180,12 @@ export default defineComponent({
 			this.isResizing = true;
 			this.$emit('resizestart');
 		},
+		onInputScroll(event: WheelEvent) {
+			// Pass through zoom events but hold regular scrolling
+			if (!event.ctrlKey && !event.metaKey) {
+				event.stopPropagation();
+			}
+		},
 	},
 	watch: {
 		editMode(newMode, prevMode) {