npm - @toolbox-web/grid-angular - Versions diffs - 0.14.3 → 0.15.0 - Mend

@toolbox-web/grid-angular 0.14.3 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/fesm2022/toolbox-web-grid-angular.mjs +32 -3
package/fesm2022/toolbox-web-grid-angular.mjs.map +1 -1
package/package.json +1 -1
package/types/toolbox-web-grid-angular.d.ts +3 -0
package/types/toolbox-web-grid-angular.d.ts.map +1 -1

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

@@ -3207,6 +3207,7 @@ let anchorCounter = 0;
  * - **Escape handling** — closes the panel and returns focus to the inline input
  * - **Synthetic Tab dispatch** — advances grid focus after overlay close
  * - **Automatic teardown** — removes the panel from `<body>` and cleans up listeners
+ * - **External focus registration** — auto-registers the panel via `grid.registerExternalFocusContainer()` so the grid keeps `data-has-focus` and editors stay open while the overlay has focus
  *
  * ## Usage
  *
@@ -3329,6 +3330,9 @@ class BaseOverlayEditor extends BaseGridEditor {
         }
         // Move panel to body so it escapes grid overflow clipping
         document.body.appendChild(panel);
+        // Register the panel as an external focus container on the grid
+        // so focus moving into the overlay is treated as "still in the grid"
+        this._getGridElement()?.registerExternalFocusContainer?.(panel);
         // Set up click-outside detection
         this._abortCtrl = new AbortController();
         document.addEventListener('pointerdown', (e) => this._onDocumentPointerDown(e), {
@@ -3388,6 +3392,10 @@ class BaseOverlayEditor extends BaseGridEditor {
         this._abortCtrl = null;
         this._focusObserver?.disconnect();
         this._focusObserver = null;
+        // Unregister the panel from the grid's external focus container registry
+        if (this._panel) {
+            this._getGridElement()?.unregisterExternalFocusContainer?.(this._panel);
+        }
         if (this._panel?.parentNode) {
             this._panel.parentNode.removeChild(this._panel);
         }
@@ -3500,6 +3508,10 @@ class BaseOverlayEditor extends BaseGridEditor {
     _getCell() {
         return this._elementRef.nativeElement.closest('[part="cell"]') ?? null;
     }
+    /** Find the parent `<tbw-grid>` element for this editor. */
+    _getGridElement() {
+        return this._elementRef.nativeElement.closest('tbw-grid') ?? null;
+    }
     /**
      * JS fallback positioning for browsers without CSS Anchor Positioning.
      * Uses `getBoundingClientRect()` with viewport overflow detection.
@@ -3597,13 +3609,18 @@ class BaseOverlayEditor extends BaseGridEditor {
         if (!cell)
             return;
         let justOpened = false;
+        let pendingHideRaf = 0;
         this._focusObserver = new MutationObserver((mutations) => {
             for (const mutation of mutations) {
                 if (mutation.type !== 'attributes' || mutation.attributeName !== 'class')
                     continue;
                 const isFocused = cell.classList.contains('cell-focus');
                 if (isFocused && !this._isOpen) {
-                    // Cell just gained focus — open overlay if appropriate
+                    // Cell just gained focus — cancel any pending hide and open overlay.
+                    if (pendingHideRaf) {
+                        cancelAnimationFrame(pendingHideRaf);
+                        pendingHideRaf = 0;
+                    }
                     justOpened = true;
                     this.showOverlay();
                     this.onOverlayOpened();
@@ -3615,8 +3632,20 @@ class BaseOverlayEditor extends BaseGridEditor {
                     }, 0);
                 }
                 else if (!isFocused && this._isOpen && !justOpened) {
-                    // Cell lost focus — hide overlay silently
-                    this.hideOverlay(true);
+                    // Cell lost focus — defer hide to allow render cycles to settle.
+                    // Re-renders (e.g., from ResizeObserver after a footer appears)
+                    // may transiently toggle cell-focus within the same frame.
+                    // Deferring to the next animation frame lets the render pipeline
+                    // finish before we decide whether the overlay should actually close.
+                    if (pendingHideRaf)
+                        cancelAnimationFrame(pendingHideRaf);
+                    pendingHideRaf = requestAnimationFrame(() => {
+                        pendingHideRaf = 0;
+                        // Re-check settled state — cell-focus may have been re-applied
+                        if (!cell.classList.contains('cell-focus') && this._isOpen) {
+                            this.hideOverlay(true);
+                        }
+                    });
                 }
             }
         });