Skip to content

Commit dd93ac4

Browse files
authored
fix: Only add the listeners for DomWidget components once (#5846)
## Summary Fixes the laggy textarea select noted in Discord. ## Changes - **What**: Fixes the case where a DomWidget that was repeatedly made visible accumulated as many event listeners as times it was toggled on. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5846-fix-Only-add-the-listeners-for-DomWidget-components-once-27d6d73d3650818382e0d0c565fc862a) by [Unito](https://www.unito.io)
1 parent e0b1a6d commit dd93ac4

File tree

1 file changed

+24
-31
lines changed

1 file changed

+24
-31
lines changed

src/components/graph/widgets/DomWidget.vue

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -125,50 +125,43 @@ watch(
125125
}
126126
}
127127
)
128-
129-
// Set up event listeners only after the widget is mounted and visible
130-
const setupDOMEventListeners = () => {
131-
if (!isDOMWidget(widget) || !widgetState.visible) return
132-
133-
if (widget.element.blur) {
134-
useEventListener(document, 'mousedown', (event) => {
135-
if (!widget.element.contains(event.target as HTMLElement)) {
136-
widget.element.blur()
137-
}
138-
})
128+
useEventListener(document, 'mousedown', (event) => {
129+
if (!isDOMWidget(widget) || !widgetState.visible || !widget.element.blur) {
130+
return
131+
}
132+
if (!widget.element.contains(event.target as HTMLElement)) {
133+
widget.element.blur()
139134
}
135+
})
140136
141-
for (const evt of widget.options.selectOn ?? ['focus', 'click']) {
142-
useEventListener(widget.element, evt, () => {
137+
onMounted(() => {
138+
if (!isDOMWidget(widget)) {
139+
return
140+
}
141+
useEventListener(
142+
widget.element,
143+
widget.options.selectOn ?? ['focus', 'click'],
144+
() => {
143145
const lgCanvas = canvasStore.canvas
144146
lgCanvas?.selectNode(widget.node)
145147
lgCanvas?.bringToFront(widget.node)
146-
})
147-
}
148-
}
149-
150-
// Set up event listeners when widget becomes visible
151-
watch(
152-
() => widgetState.visible,
153-
(visible) => {
154-
if (visible) {
155-
setupDOMEventListeners()
156148
}
157-
},
158-
{ immediate: true }
159-
)
149+
)
150+
})
160151
161152
const inputSpec = widget.node.constructor.nodeData
162153
const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
163154
164155
// Mount DOM element when widget is or becomes visible
165156
const mountElementIfVisible = () => {
166-
if (widgetState.visible && isDOMWidget(widget) && widgetElement.value) {
167-
// Only append if not already a child
168-
if (!widgetElement.value.contains(widget.element)) {
169-
widgetElement.value.appendChild(widget.element)
170-
}
157+
if (!(widgetState.visible && isDOMWidget(widget) && widgetElement.value)) {
158+
return
159+
}
160+
// Only append if not already a child
161+
if (widgetElement.value.contains(widget.element)) {
162+
return
171163
}
164+
widgetElement.value.appendChild(widget.element)
172165
}
173166
174167
// Check on mount - but only after next tick to ensure visibility is calculated

0 commit comments

Comments
 (0)