@toolbox-web/grid-angular 1.3.0 → 1.3.1

package/fesm2022/toolbox-web-grid-angular.mjs

@@ -1554,6 +1554,21 @@ class GridAdapter {
     editorViewRefs = [];
     /** Editor-specific component refs tracked separately for per-cell cleanup via releaseCell. */
     editorComponentRefs = [];
+    /**
+     * Per-editor `before-edit-close` listener teardown functions, keyed by
+     * editor host element.
+     *
+     * The grid's editing plugin emits `before-edit-close` on the host
+     * `<tbw-grid>` before tearing down a row's managed editors. Angular
+     * editors that commit on `(blur)` rely on the focused input firing `blur`
+     * naturally, but Tab / programmatic row exit rebuilds the cell DOM
+     * synchronously without giving the focused input a chance to blur first
+     * — pending input is silently discarded.
+     *
+     * Mirror of Vue's `editorBeforeCloseUnsubs` and React's
+     * `wrapReactEditor` queueMicrotask bridge.
+     */
+    editorBeforeCloseUnsubs = new Map();
     typeRegistry = null;
     constructor(injector, appRef, viewContainerRef) {
         this.injector = injector;
@@ -1828,6 +1843,7 @@ class GridAdapter {
             const container = document.createElement('span');
             container.style.display = 'contents';
             syncRootNodes(viewRef, container);
+            this.attachBeforeEditCloseFlush(container);
             // Auto-wire: Listen for commit/cancel events on the rendered component.
             // This allows components to just emit (commit) and (cancel) without
             // requiring explicit template bindings like (commit)="onCommit($event)".
@@ -2114,6 +2130,7 @@ class GridAdapter {
                 column: ctx.column,
             }, true);
             wireEditorCallbacks(hostElement, componentRef.instance, (value) => ctx.commit(value), () => ctx.cancel());
+            this.attachBeforeEditCloseFlush(hostElement);
             // Auto-update editor when value changes externally (e.g., via updateRow cascade
             // or Escape-revert). Update the component input and run detectChanges() —
             // the component's own template handles rendering regardless of editor type.
@@ -2432,6 +2449,13 @@ class GridAdapter {
                 this.editorComponentRefs.splice(i, 1);
             }
         }
+        // Detach `before-edit-close` listeners for editor hosts inside this cell
+        for (const [hostEl, unsub] of this.editorBeforeCloseUnsubs) {
+            if (cellEl.contains(hostEl)) {
+                unsub();
+                this.editorBeforeCloseUnsubs.delete(hostEl);
+            }
+        }
     }
     /**
      * Unmount a specific container (e.g., detail panel, tool panel).
@@ -2469,6 +2493,41 @@ class GridAdapter {
         this.componentRefs = [];
         this.editorComponentRefs.forEach((ref) => ref.destroy());
         this.editorComponentRefs = [];
+        this.editorBeforeCloseUnsubs.forEach((unsub) => unsub());
+        this.editorBeforeCloseUnsubs.clear();
+    }
+    /**
+     * Attaches a `before-edit-close` listener on the host grid that flushes
+     * the focused input inside `host` via native `.blur()` so editors that
+     * commit on `(blur)` flush pending input before the cell DOM is torn
+     * down by Tab / programmatic row exit.
+     *
+     * The grid is resolved lazily via `queueMicrotask` because the host is
+     * appended to the cell *after* the editor wrapper returns. Mirror of
+     * Vue's `attachBeforeEditCloseFlush` and React's `wrapReactEditor`
+     * queueMicrotask bridge.
+     * @internal
+     */
+    attachBeforeEditCloseFlush(host) {
+        queueMicrotask(() => {
+            const gridEl = host.closest('tbw-grid');
+            if (!gridEl)
+                return;
+            const flush = () => {
+                const focused = host.ownerDocument.activeElement;
+                if (focused &&
+                    host.contains(focused) &&
+                    (focused instanceof HTMLInputElement ||
+                        focused instanceof HTMLTextAreaElement ||
+                        focused instanceof HTMLSelectElement)) {
+                    focused.blur();
+                }
+            };
+            gridEl.addEventListener('before-edit-close', flush);
+            this.editorBeforeCloseUnsubs.set(host, () => {
+                gridEl.removeEventListener('before-edit-close', flush);
+            });
+        });
     }
 }