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.
This commit is contained in:
Milorad FIlipović 2023-12-22 14:18:32 +01:00 committed by GitHub
parent c6dd935895
commit e928210ccd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

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