@needle-tools/engine 4.16.11 → 4.16.12

package/src/engine/engine_context.ts

@@ -1,5 +1,6 @@
 import 'three/examples/jsm/renderers/webgl-legacy/nodes/WebGLNodes.js';
 
+import { NEEDLE_progressive } from '@needle-tools/gltf-progressive';
 import type { EffectComposer } from "postprocessing";
 import {
 	BufferGeometry, Camera, Color, DepthTexture, Group,
@@ -16,7 +17,7 @@ import { nodeFrame } from "three/examples/jsm/renderers/webgl-legacy/nodes/WebGL
 import { initSpectorIfAvailable } from './debug/debug_spector.js';
 import { isDevEnvironment, LogType, showBalloonError, showBalloonMessage } from './debug/index.js';
 import { AccessibilityManager } from './engine_accessibility.js';
-import { Addressables } from './engine_addressables.js';
+import { Addressables, clearAssetCaches } from './engine_addressables.js';
 import { AnimationsRegistry } from './engine_animation.js';
 import { Application } from './engine_application.js';
 import { AssetDatabase } from './engine_assetdatabase.js';
@@ -850,6 +851,19 @@ export class Context implements IContext {
 		Context.Current = this;
 		ContextRegistry.dispatchCallback(ContextEvent.ContextDestroying, this);
 		invokeLifecycleFunctions(this, ContextEvent.ContextDestroying);
+		// The global legacy node frame must not retain this context's scene after teardown.
+		if (nodeFrame.camera === this._mainCamera || nodeFrame.camera === this._fallbackCamera
+			|| nodeFrame.camera === this.mainCameraComponent?.threeCamera) {
+			nodeFrame.camera = null;
+		}
+		if (this.renderer && nodeFrame.renderer === this.renderer) {
+			nodeFrame.camera = null;
+			nodeFrame.renderer = null;
+			nodeFrame.object = null;
+			nodeFrame.material = null;
+			nodeFrame.scene = null;
+			nodeFrame.geometry = null;
+		}
 		this.clear();
 		this.renderer?.setAnimationLoop(null);
 		if (this.renderer) {
@@ -862,6 +876,7 @@ export class Context implements IContext {
 		}
 		this.scene = null!;
 		this.renderer = null!;
+		this.application.dispose();
 		this.input.dispose();
 		this.menu.onDestroy();
 		this.animations.onDestroy();
@@ -880,6 +895,15 @@ export class Context implements IContext {
 		ContextRegistry.dispatchCallback(ContextEvent.ContextDestroyed, this);
 		invokeLifecycleFunctions(this, ContextEvent.ContextDestroyed);
 		ContextRegistry.unregister(this);
+		// The asset caches (FileReference/ImageReference) are static and shared by all contexts, so
+		// they can only be released once nothing is left that could still be using them. Without
+		// this they are never emptied: a SPA that repeatedly creates and destroys <needle-engine>
+		// elements keeps every loaded file and image alive for the lifetime of the document.
+		if (ContextRegistry.Registered.length === 0) {
+			clearAssetCaches();
+			// Geometry promises in this shared cache retain resource users and their textures.
+			NEEDLE_progressive.dispose();
+		}
 		if (Context.Current === this) {
 			//@ts-ignore
 			Context.Current = null;

package/src/engine/engine_input.ts

@@ -942,7 +942,7 @@ export class Input implements IInput {
         window.removeEventListener('contextmenu', this.onContextMenu);
 
         this._htmlEventSource?.removeEventListener('pointerdown', this.onPointerDown);
-        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointermove', this.onPointerMove, true);
         window.removeEventListener('pointerup', this.onPointerUp);
         window.removeEventListener('pointercancel', this.onPointerCancel);
 
@@ -1597,4 +1597,4 @@ export declare type KeyCode =
 // OPEN_BRACKET = 219,
 // BACK_SLASH = 220,
 // CLOSE_BRACKET = 221,
-// SINGLE_QUOTE = 222
+// SINGLE_QUOTE = 222

package/src/engine/engine_license.ts

@@ -10,6 +10,23 @@ import type { IContext } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
 import { InternalAttributeUtils } from "./engine_utils_attributes.js";
 
+// License UI polling must stop when its context goes away; otherwise timers retain scenes.
+const licenseIntervals = new WeakMap<IContext, Set<ReturnType<typeof setInterval>>>();
+const disposedLicenseContexts = new WeakSet<IContext>();
+ContextRegistry.registerCallback(ContextEvent.ContextDestroying, ({ context }) => {
+    disposedLicenseContexts.add(context);
+    for (const timer of licenseIntervals.get(context) ?? []) clearInterval(timer);
+    licenseIntervals.delete(context);
+});
+function setLicenseInterval(ctx: IContext, callback: () => void, delay: number) {
+    if (disposedLicenseContexts.has(ctx)) return undefined;
+    let timers = licenseIntervals.get(ctx);
+    if (!timers) licenseIntervals.set(ctx, timers = new Set());
+    const timer = setInterval(callback, delay);
+    timers.add(timer);
+    return timer;
+}
+
 const debug = getParam("debuglicense");
 
 const _licenseCheckResultChangedCallbacks: ((result: boolean) => void)[] = [];
@@ -56,9 +73,15 @@ export function hasCommercialLicense() {
 
 /** @internal */
 export function onLicenseCheckResultChanged(cb: (result: boolean) => void) {
-    if (hasProLicense() || hasIndieLicense() || hasEduLicense())
-        return cb(true);
+    if (hasProLicense() || hasIndieLicense() || hasEduLicense()) {
+        cb(true);
+        return () => {};
+    }
     _licenseCheckResultChangedCallbacks.push(cb);
+    return () => {
+        const index = _licenseCheckResultChangedCallbacks.indexOf(cb);
+        if (index >= 0) _licenseCheckResultChangedCallbacks.splice(index, 1);
+    };
 }
 
 function invokeLicenseCheckResultChanged(result: boolean) {
@@ -328,7 +351,7 @@ async function handleForbidden(ctx: IContext) {
         const expectedTextStyle = text.style.cssText;
         const forbiddenText = applicationForbiddenText?.length > 1 ? applicationForbiddenText : "This web application has been paused.<br/>You might be in violation of the Needle Engine terms of use.<br/>Please contact the Needle support if you think this is a mistake.";
         text.innerHTML = forbiddenText;
-        setInterval(() => {
+        setLicenseInterval(ctx, () => {
             if (text.innerHTML !== forbiddenText) text.innerHTML = forbiddenText;
             if (text.parentNode !== div) div.appendChild(text);
             if (div.style.cssText !== expectedStyle) div.style.cssText = expectedStyle;
@@ -338,7 +361,7 @@ async function handleForbidden(ctx: IContext) {
     }
     let forbiddenElement = createForbiddenElement();
     const expectedCSS = forbiddenElement.style.cssText;
-    setInterval(() => {
+    setLicenseInterval(ctx, () => {
         if (applicationIsForbidden === true) {
             if (forbiddenElement.style.cssText !== expectedCSS) forbiddenElement = createForbiddenElement();
             if (ctx.domElement.shadowRoot) {
@@ -452,7 +475,7 @@ function insertNonCommercialUseHint(ctx: IContext) {
     }, 100);
 
     // ensure the banner is always visible
-    const interval = setInterval(() => {
+    const interval = setLicenseInterval(ctx, () => {
         const parent = ctx.domElement.shadowRoot || ctx.domElement;
         if (banner.parentNode !== parent) {
             parent.appendChild(banner);

package/src/engine/engine_lifecycle_functions_internal.ts

@@ -141,13 +141,27 @@ function internalInvokeLifecycleFunctions(ctx: Context, evt: Event) {
     }
 }
 
-const bufferArray = new Array<RegisteredLifecycleMethod>();
+const buffers: Array<Array<RegisteredLifecycleMethod>> = [];
+let invocationDepth = 0;
 const hookContext: LifecycleHookContext = {
     context: null as any as Context
 };
 
 function invoke(ctx: Context, methods: Array<RegisteredLifecycleMethod>, invokeOnce: boolean) {
-    bufferArray.length = 0;
+    // Reuse storage per nesting depth: hooks may synchronously invoke other hooks.
+    const bufferArray = buffers[invocationDepth] ?? (buffers[invocationDepth] = []);
+    invocationDepth++;
+    try {
+        invokeWithBuffer(ctx, methods, invokeOnce, bufferArray);
+    }
+    finally {
+        // One-time/unregistered callbacks can capture entire scenes as well.
+        bufferArray.length = 0;
+        invocationDepth--;
+    }
+}
+
+function invokeWithBuffer(ctx: Context, methods: Array<RegisteredLifecycleMethod>, invokeOnce: boolean, bufferArray: Array<RegisteredLifecycleMethod>) {
     for (let i = 0; i < methods.length; i++) {
         bufferArray.push(methods[i]);
     }
@@ -161,6 +175,7 @@ function invoke(ctx: Context, methods: Array<RegisteredLifecycleMethod>, invokeO
         }
 
         if (invoke) {
+            const previousContext = hookContext.context;
             try {
                 hookContext.context = ctx;
                 entry.method?.call(hookContext, ctx);
@@ -168,6 +183,10 @@ function invoke(ctx: Context, methods: Array<RegisteredLifecycleMethod>, invokeO
             catch (e) {
                 console.error("Error in lifecycle method", e);
             }
+            finally {
+                // This shared receiver must not keep the last invoked context alive.
+                hookContext.context = previousContext;
+            }
         }
 
         // Remove the method if it's a one time call

package/src/engine/engine_networking_streams.ts

@@ -1,4 +1,5 @@
-import Peer, { CallOption, MediaConnection } from "peerjs"
+import type Peer from "peerjs";
+import type { CallOption, MediaConnection } from "peerjs";
 import { EventDispatcher } from "three";
 
 import { RoomEvents } from "../engine/engine_networking.js";
@@ -7,6 +8,7 @@ import { getPeerjsInstance } from "../engine/engine_networking_peer.js";
 import { showBalloonMessage } from "./debug/index.js";
 import { Application } from "./engine_application.js";
 import { Context } from "./engine_context.js";
+import { ContextEvent, ContextRegistry } from "./engine_context_registry.js";
 import type { IModel } from "./engine_networking_types.js";
 import { type IComponent, isComponent } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
@@ -120,17 +122,31 @@ function applySdpTransform(sdp) {
 
 export class PeerHandle extends EventDispatcher<any> {
 
-    private static readonly instances: Map<string, PeerHandle> = new Map();
+    // Weak ownership prevents this cache from rooting a context and its scene indefinitely.
+    // IDs are scoped to contexts: separate engine elements may use the same stream ID.
+    private static readonly instances = new WeakMap<Context, Map<string, PeerHandle>>();
+
+    static {
+        ContextRegistry.registerCallback(ContextEvent.ContextDestroying, ({ context }) => {
+            const handles = PeerHandle.instances.get(context as Context);
+            if (!handles) return;
+            PeerHandle.instances.delete(context as Context);
+            for (const handle of handles.values()) handle.dispose();
+            handles.clear();
+        });
+    }
 
     static getOrCreate(context: Context, guid: string): PeerHandle {
-        // if (id === undefined) {
-        //     // randomId
-        //     id = Math.random().toFixed(5);
-        // }
-        if (PeerHandle.instances.has(guid))
-            return PeerHandle.instances.get(guid)!;
-        const peer = new PeerHandle(context, guid);
-        PeerHandle.instances.set(guid, peer);
+        let handles = PeerHandle.instances.get(context);
+        if (!handles) {
+            handles = new Map();
+            PeerHandle.instances.set(context, handles);
+        }
+        let peer = handles.get(guid);
+        if (!peer) {
+            peer = new PeerHandle(context, guid);
+            handles.set(guid, peer);
+        }
         return peer;
     }
 
@@ -150,6 +166,7 @@ export class PeerHandle extends EventDispatcher<any> {
     }
 
     makeCall(peerId: string, stream: MediaStream): CallHandle | undefined {
+        if (this._disposed) return undefined;
         if (!stream?.id) {
             if (debug) console.warn("Can not make a call: mediastream has no id or is undefined");
             else console.debug("Can not make a call: mediastream has no id or is undefined");
@@ -178,10 +195,8 @@ export class PeerHandle extends EventDispatcher<any> {
     }
 
     closeAll() {
-        for (const call of this._incomingCalls) {
-            call.close();
-        }
-        for (const call of this._outgoingCalls) {
+        // Closing a call synchronously removes it from the original array.
+        for (const call of [...this._incomingCalls, ...this._outgoingCalls]) {
             call.close();
         }
         this.updateCalls();
@@ -252,16 +267,33 @@ export class PeerHandle extends EventDispatcher<any> {
         }
     }
 
+    private _disposed = false;
+    private readonly _callIntervals = new Set<ReturnType<typeof setInterval>>();
+
+    private dispose() {
+        if (this._disposed) return;
+        this._disposed = true;
+        this.disable();
+        this.unsubscribePeerEvents();
+        for (const interval of this._callIntervals) clearInterval(interval);
+        this._callIntervals.clear();
+        this.closeAll();
+        this._incomingCalls.length = 0;
+        this._outgoingCalls.length = 0;
+        this._peer?.destroy();
+        this._peer = undefined;
+    }
+
     private _enabled: boolean = false;
     private _enabledPeer: boolean = false;
-    private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
+    private onConnectRoomFn: () => void = this.onConnectRoom.bind(this);
     // private onUserJoinedOrLeftRoomFn: Function = this.onUserJoinedOrLeftRoom.bind(this);
     // private onPeerConnectFn: (id) => void = this.onPeerConnect.bind(this);
     // private onPeerReceiveCallFn: (call) => void = this.onPeerReceivingCall.bind(this);
     // private _connectionPeerIdMap : Map<string, string> = new Map();
 
     enable() {
-        if (this._enabled) return;
+        if (this._disposed || this._enabled) return;
         this._enabled = true;
         this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
         // this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
@@ -286,13 +318,19 @@ export class PeerHandle extends EventDispatcher<any> {
     // };
 
     private setupPeer() {
-        if (!this.context.connection.connectionId) return;
+        if (this._disposed || !this.context.connection.connectionId) return;
         if (this._enabledPeer) return;
         this._enabledPeer = true;
         if (!this._peer) {
             const peerId = this.getMyPeerId();
-            if (peerId)
-                this._peer = getPeerjsInstance(peerId);
+            if (peerId) {
+                const peer = getPeerjsInstance(peerId);
+                if (this._disposed) {
+                    peer.destroy();
+                    return;
+                }
+                this._peer = peer;
+            }
             else console.error("Failed to setup peerjs because we dont have a connection id", this.context.connection.connectionId);
         }
         if (this._enabled)
@@ -414,6 +452,7 @@ export class PeerHandle extends EventDispatcher<any> {
             });
 
             call.on("stream", () => {
+                if (this._disposed) return;
                 if (debug) console.log("Received stream for call", call.metadata);
                 // workaround for https://github.com/peers/peerjs/issues/636
                 let intervalCounter = 0;
@@ -423,9 +462,15 @@ export class PeerHandle extends EventDispatcher<any> {
                         if (debug) console.warn("Close call because stream is not active", call.metadata);
                         intervalCounter += 1;
                         clearInterval(closeInterval);
+                        this._callIntervals.delete(closeInterval);
                         handle.close();
                     }
                 }, 2000);
+                this._callIntervals.add(closeInterval);
+                call.on("close", () => {
+                    clearInterval(closeInterval);
+                    this._callIntervals.delete(closeInterval);
+                });
             });
         }
         return handle;

package/src/engine/physics/workers/mesh-bvh/GenerateMeshBVHWorker.js

@@ -120,7 +120,14 @@ export class GenerateMeshBVHWorker extends WorkerBase {
 
 			}, transferable.map( arr => arr.buffer ).filter( v => ( typeof SharedArrayBuffer === 'undefined' ) || ! ( v instanceof SharedArrayBuffer ) ) );
 
-		} );
+		} ).finally( () => {
+
+            // Pooled workers outlive each job. Both handlers capture the job scope,
+            // including its geometry, even after the promise has settled.
+            worker.onmessage = null;
+            worker.onerror = null;
+
+        } );
 
 	}
 

package/src/engine/webcomponents/fonts.ts

@@ -27,6 +27,12 @@ export function loadFont(url: string, opts?: LoadFontOptions) {
             }
         }
     }
+    // The link lives in document.head and can outlive the component using this callback.
+    return () => {
+        if (opts?.loadedCallback) {
+            for (const link of elements) link.removeEventListener("load", opts.loadedCallback);
+        }
+    };
 }
 
 

package/src/engine/webcomponents/icons.ts

@@ -20,7 +20,15 @@ export function getIconElement(str: string): HTMLElement {
     span.setAttribute("role", "img");
     span.setAttribute("aria-label", str + " icon");
     span.setAttribute("aria-hidden", "true");
+    updateIconWhenFontReady(new WeakRef(span), str);
+    return span;
+}
+
+// Pending font loads must not retain detached menu trees.
+function updateIconWhenFontReady(reference: WeakRef<HTMLSpanElement>, str: string) {
     fontReady(fontname).then(res => {
+        const span = reference.deref();
+        if (!span) return;
         if (res) span.style.visibility = "";
         else {
             if (str === "more_vert") {
@@ -31,8 +39,7 @@ export function getIconElement(str: string): HTMLElement {
                 span.style.display = "none";
             }
         }
-    })
-    return span;
+    });
 }
 
 /**@returns true if the element is an needle engine icon element */

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -3,7 +3,7 @@ import type { Context } from "../../engine_context.js";
 import { hasCommercialLicense, onLicenseCheckResultChanged, Telemetry } from "../../engine_license.js";
 import { isLocalNetwork } from "../../engine_networking_utils.js";
 import { DeviceUtilities, getParam } from "../../engine_utils.js";
-import { onXRSessionStart, XRSessionEventArgs } from "../../xr/events.js";
+import { offXRSessionStart, onXRSessionStart, XRSessionEventArgs } from "../../xr/events.js";
 import { ButtonsFactory } from "../buttons.js";
 import { ensureFonts, iconFontUrl, loadFont } from "../fonts.js";
 import { getIconElement } from "../icons.js";
@@ -138,7 +138,9 @@ export class NeedleMenu {
 
     /** @ignore internal method */
     onDestroy() {
+        offXRSessionStart(this.onStartXR);
         window.removeEventListener("message", this.onPostMessage);
+        this._menu.dispose();
         this._menu.remove();
         this._spatialMenu.onDestroy();
     }
@@ -338,6 +340,19 @@ export class NeedleMenuElement extends HTMLElement {
 
     private _domElement: HTMLElement | null = null;
     private _context: Context | null = null;
+    private _unsubscribeFont?: () => void;
+    private _licenseFrame?: number;
+    private _unsubscribeLicense?: () => void;
+
+    /** @internal Release font and license subscriptions when the owning context is destroyed. */
+    dispose() {
+        this._unsubscribeFont?.();
+        this._unsubscribeFont = undefined;
+        if (this._licenseFrame !== undefined) window.cancelAnimationFrame(this._licenseFrame);
+        this._licenseFrame = undefined;
+        this._unsubscribeLicense?.();
+        this._unsubscribeLicense = undefined;
+    }
     private _didInitialize = false;
 
     constructor() {
@@ -748,7 +763,7 @@ export class NeedleMenuElement extends HTMLElement {
         // we need to add the icons to both the shadow dom as well as the HEAD to work 
         // https://github.com/google/material-design-icons/issues/1165
         ensureFonts();
-        loadFont(iconFontUrl, { loadedCallback: () => { this.handleSizeChange() } });
+        this._unsubscribeFont = loadFont(iconFontUrl, { loadedCallback: () => { this.handleSizeChange() } });
         loadFont(iconFontUrl, { element: shadow });
 
         const content = template.content.cloneNode(true) as DocumentFragment;
@@ -777,16 +792,19 @@ export class NeedleMenuElement extends HTMLElement {
         try {
             // if the user has a license then we CAN hide the needle logo
             // calling this method immediately will cause an issue with vite bundling tho
-            window.requestAnimationFrame(() => onLicenseCheckResultChanged(res => {
-                if (res == true && hasCommercialLicense() && !debugNonCommercial) {
-                    let visible = this._userRequestedLogoVisible;
-                    if (visible === undefined) visible = false;
-                    this.___onSetLogoVisible(visible);
-                }
-                else {
-                    this.___onSetLogoVisible(true);
-                }
-            }));
+            this._licenseFrame = window.requestAnimationFrame(() => {
+                this._licenseFrame = undefined;
+                this._unsubscribeLicense = onLicenseCheckResultChanged(res => {
+                    if (res == true && hasCommercialLicense() && !debugNonCommercial) {
+                        let visible = this._userRequestedLogoVisible;
+                        if (visible === undefined) visible = false;
+                        this.___onSetLogoVisible(visible);
+                    }
+                    else {
+                        this.___onSetLogoVisible(true);
+                    }
+                });
+            });
         } catch (e) {
             console.error("[Needle Menu] License check failed.", e);
         }

package/src/engine/webcomponents/needle-engine.loading.ts

@@ -19,6 +19,7 @@ export class LoadingElementOptions {
 
 /** @internal */
 export interface ILoadingViewHandler {
+    dispose?(): void;
     onLoadingBegin(message?: string)
     onLoadingUpdate(progress: LoadingProgressArgs | number, message?: string);
     onLoadingFinished(message?: string);
@@ -79,6 +80,17 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._loadingElementOptions = opts;
     }
 
+    dispose() {
+        // Removal can happen before ready stops the progress interval.
+        clearInterval(this._progressLoop);
+        this._progressLoop = null;
+        this._loadingElement?.remove();
+        this._loadingElement = undefined;
+        this._loadingTextContainer = null;
+        this._loadingBar = null;
+        this._messageContainer = null;
+    }
+
     async onLoadingBegin(message?: string) {
         const _element = this._element.shadowRoot || this._element;
         if (debug) console.warn("Begin Loading")
@@ -402,4 +414,4 @@ export class EngineLoadingView implements ILoadingViewHandler {
     //     nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
     //     nonCommercialContainer.style.opacity = "1";
     // }
-}
+}

package/src/engine/webcomponents/needle-engine.ts

@@ -172,6 +172,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     private _overlay_ar!: AROverlayHandler;
     private _loadingProgress01: number = 0;
     private _loadingView?: ILoadingViewHandler;
+    private _cancelLoadingBlur?: () => void;
     private _previousSrc: string | null | string[] = null;
     /** @private set to true after <needle-engine> did load completely at least once. Set to false when < to false when <needle-engine> is removed from the document removed from the document */
     private _didFullyLoad: boolean = false;
@@ -335,6 +336,9 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         const dispose = keepAlive == undefined || (keepAlive?.length > 0 && keepAlive !== "true" && keepAlive !== "1");
         if (debug) console.warn("<needle-engine> disconnected, keep-alive: \"" + keepAlive + "\"", typeof keepAlive, "Dispose=", dispose);
         if (dispose) {
+            this._cancelLoadingBlur?.();
+            this._cancelLoadingBlur = undefined;
+            this._loadingView?.dispose?.();
             if (debug)
                 console.warn("<needle-engine> dispose");
             this._context?.dispose();
@@ -583,7 +587,8 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
 
 
         // Experimental loading blur
-        handleLoadingBlur(this);
+        this._cancelLoadingBlur?.();
+        this._cancelLoadingBlur = handleLoadingBlur(this);
 
         const currentHash = this.getAttribute("hash");
         if (currentHash !== null && currentHash !== undefined)
@@ -1243,8 +1248,12 @@ function getDisplayName(str: string) {
 
 
 function handleLoadingBlur(needleEngineElement: NeedleEngineWebComponent) {
-    onStart((ctx) => {
-        const userBlurSetting = needleEngineElement.getAttribute("loading-blur");
+    const userBlurSetting = needleEngineElement.getAttribute("loading-blur");
+    if (userBlurSetting === null || userBlurSetting === "0") return undefined;
+    const unregister = onStart((ctx) => {
+        // A different context starting must not consume this element's callback.
+        if (ctx.domElement !== needleEngineElement) return;
+        unregister();
         if (userBlurSetting !== null && userBlurSetting !== "0") {
             if (ctx.domElement === needleEngineElement) {
 
@@ -1297,5 +1306,6 @@ function handleLoadingBlur(needleEngineElement: NeedleEngineWebComponent) {
                 }
             }
         }
-    }, { once: true });
-}
+    });
+    return unregister;
+}