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) {