Skip to content

Commit df73f02

Browse files
DrJKLgithub-actions[bot]
authored andcommitted
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 470663e commit df73f02

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
@@ -124,50 +124,43 @@ watch(
124124
}
125125
}
126126
)
127-
128-
// Set up event listeners only after the widget is mounted and visible
129-
const setupDOMEventListeners = () => {
130-
if (!isDOMWidget(widget) || !widgetState.visible) return
131-
132-
if (widget.element.blur) {
133-
useEventListener(document, 'mousedown', (event) => {
134-
if (!widget.element.contains(event.target as HTMLElement)) {
135-
widget.element.blur()
136-
}
137-
})
127+
useEventListener(document, 'mousedown', (event) => {
128+
if (!isDOMWidget(widget) || !widgetState.visible || !widget.element.blur) {
129+
return
130+
}
131+
if (!widget.element.contains(event.target as HTMLElement)) {
132+
widget.element.blur()
138133
}
134+
})
139135
140-
for (const evt of widget.options.selectOn ?? ['focus', 'click']) {
141-
useEventListener(widget.element, evt, () => {
136+
onMounted(() => {
137+
if (!isDOMWidget(widget)) {
138+
return
139+
}
140+
useEventListener(
141+
widget.element,
142+
widget.options.selectOn ?? ['focus', 'click'],
143+
() => {
142144
const lgCanvas = canvasStore.canvas
143145
lgCanvas?.selectNode(widget.node)
144146
lgCanvas?.bringToFront(widget.node)
145-
})
146-
}
147-
}
148-
149-
// Set up event listeners when widget becomes visible
150-
watch(
151-
() => widgetState.visible,
152-
(visible) => {
153-
if (visible) {
154-
setupDOMEventListeners()
155147
}
156-
},
157-
{ immediate: true }
158-
)
148+
)
149+
})
159150
160151
const inputSpec = widget.node.constructor.nodeData
161152
const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
162153
163154
// Mount DOM element when widget is or becomes visible
164155
const mountElementIfVisible = () => {
165-
if (widgetState.visible && isDOMWidget(widget) && widgetElement.value) {
166-
// Only append if not already a child
167-
if (!widgetElement.value.contains(widget.element)) {
168-
widgetElement.value.appendChild(widget.element)
169-
}
156+
if (!(widgetState.visible && isDOMWidget(widget) && widgetElement.value)) {
157+
return
158+
}
159+
// Only append if not already a child
160+
if (widgetElement.value.contains(widget.element)) {
161+
return
170162
}
163+
widgetElement.value.appendChild(widget.element)
171164
}
172165
173166
// Check on mount - but only after next tick to ensure visibility is calculated

0 commit comments

Comments
 (0)