@aquera/ngx-smart-table 0.0.12-alpha → 0.0.13-alpha

package/fesm2020/aquera-ngx-smart-table.mjs

@@ -3612,6 +3612,7 @@ class NileSelectEditor {
         this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.currentOptions = [];
+        this.isInitializing = false; // Flag to prevent immediate close during initialization
         // Handle Observable options
         if (isObservable(options.options)) {
             this.optionsSubscription = options.options.subscribe(opts => {
@@ -3635,6 +3636,8 @@ class NileSelectEditor {
             console.warn('NileSelectEditor requires a container element');
             return;
         }
+        // Set initializing flag to prevent immediate close
+        this.isInitializing = true;
         // Create NileSelect custom element using document.createElement
         this.select = document.createElement('nile-select');
         this.select.className = 'st-cell-editor';
@@ -3656,11 +3659,22 @@ class NileSelectEditor {
         // Focus after render
         setTimeout(() => {
             this.select?.focus();
-            this.select?.click();
-            // Find the portal div for multi-select click detection
+            // Use the open property to open the dropdown (more reliable than click)
+            if (this.select) {
+                this.select.open = true;
+            }
+            // For multi-select, find the portal div for click detection
             if (this.options.multiple) {
-                // Portal div is appended to document body
-                this.portalDiv = document.querySelector('.nile-select-portal-append');
+                setTimeout(() => {
+                    this.portalDiv = document.querySelector('.nile-select-portal-append');
+                    this.isInitializing = false;
+                }, 150);
+            }
+            else {
+                // Clear initializing flag after dropdown has time to open
+                setTimeout(() => {
+                    this.isInitializing = false;
+                }, 100);
             }
         }, 0);
     }
@@ -3745,9 +3759,13 @@ class NileSelectEditor {
         if (this.options.pill) {
             this.select.pill = this.options.pill;
         }
-        if (this.options.hoist) {
+        if (this.options.hoist !== undefined) {
             this.select.hoist = this.options.hoist;
         }
+        else {
+            // Default hoist to true for all selects to prevent clipping issues in table cells
+            this.select.hoist = true;
+        }
         if (this.options.placement) {
             this.select.placement = this.options.placement;
         }
@@ -3835,6 +3853,10 @@ class NileSelectEditor {
         this.eventListeners.push({ event: 'keydown', handler: keydownHandler });
         // Use nile-change custom event as primary save trigger
         const changeHandler = (e) => {
+            // Ignore change events during initialization (can fire when setting initial value)
+            if (this.isInitializing) {
+                return;
+            }
             const customEvent = e;
             if (validateOnSave && !this.select?.checkValidity()) {
                 this.select?.reportValidity();
@@ -3850,6 +3872,10 @@ class NileSelectEditor {
         this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
         // Handle blur as secondary save trigger
         const blurHandler = (e) => {
+            // Ignore blur during initialization
+            if (this.isInitializing) {
+                return;
+            }
             if (validateOnSave && !this.select?.checkValidity()) {
                 this.select?.reportValidity();
                 return;
@@ -3858,6 +3884,22 @@ class NileSelectEditor {
         };
         this.select.addEventListener('nile-blur', blurHandler);
         this.eventListeners.push({ event: 'nile-blur', handler: blurHandler });
+        // Handle nile-hide event to prevent unwanted closing during initialization
+        const hideHandler = (e) => {
+            // If dropdown closes during initialization, re-open it (for both single and multi-select)
+            if (this.isInitializing) {
+                e.preventDefault();
+                e.stopPropagation();
+                // Re-open the dropdown after a brief delay using the open property
+                setTimeout(() => {
+                    if (this.select && this.isInitializing) {
+                        this.select.open = true;
+                    }
+                }, 10);
+            }
+        };
+        this.select.addEventListener('nile-hide', hideHandler);
+        this.eventListeners.push({ event: 'nile-hide', handler: hideHandler });
         // Handle clear button if enabled
         if (this.options.clearable) {
             const clearHandler = (e) => {
@@ -3898,12 +3940,19 @@ class NileSelectEditor {
                 }
                 // Otherwise, click is inside - do nothing (dropdown stays open)
             };
-            // Add to document with capture phase
-            document.addEventListener('click', documentClickHandler, true);
-            this.eventListeners.push({
-                event: 'document-click',
-                handler: documentClickHandler
-            });
+            // Delay adding the document click handler to prevent the initial click 
+            // (that opened the editor) from immediately triggering it and closing the dropdown
+            // Use 200ms to ensure the dropdown has fully opened
+            setTimeout(() => {
+                // Only add if select still exists (editor not destroyed)
+                if (this.select) {
+                    document.addEventListener('click', documentClickHandler, true);
+                    this.eventListeners.push({
+                        event: 'document-click',
+                        handler: documentClickHandler
+                    });
+                }
+            }, 200);
         }
     }
     /**
@@ -3924,6 +3973,8 @@ class NileSelectEditor {
         return value;
     }
     destroy() {
+        // Reset initialization flag
+        this.isInitializing = false;
         // Unsubscribe from options Observable
         if (this.optionsSubscription) {
             this.optionsSubscription.unsubscribe();