@aquera/ngx-smart-table 0.0.5-alpha → 0.0.6-alpha

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

@@ -3626,6 +3626,11 @@ class NileSelectEditor {
         setTimeout(() => {
             this.select?.focus();
             this.select?.click();
+            // Find the portal div for multi-select click detection
+            if (this.options.multiple) {
+                // Portal div is appended to document body
+                this.portalDiv = document.querySelector('.nile-select-portal-append');
+            }
         }, 0);
     }
     /**
@@ -3724,6 +3729,9 @@ class NileSelectEditor {
         if (this.options.portal !== undefined) {
             this.select.portal = this.options.portal;
         }
+        else {
+            this.select.portal = true; // Default to portal mode for better positioning
+        }
         // Prevent width syncing issues in table cells
         this.select.noWidthSync = true;
     }
@@ -3801,7 +3809,11 @@ class NileSelectEditor {
                 this.select?.reportValidity();
                 return;
             }
-            context.onSave(this.parseValue(customEvent.detail.value));
+            // Only save immediately for single-select
+            // Multi-select saves on outside click
+            if (!this.options.multiple) {
+                context.onSave(this.parseValue(customEvent.detail.value));
+            }
         };
         this.select.addEventListener('nile-change', changeHandler);
         this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
@@ -3833,6 +3845,35 @@ class NileSelectEditor {
             this.select.addEventListener('nile-search', searchHandler);
             this.eventListeners.push({ event: 'nile-search', handler: searchHandler });
         }
+        // For multi-select: detect clicks outside portal and select
+        if (this.options.multiple) {
+            const documentClickHandler = (e) => {
+                const mouseEvent = e;
+                const target = mouseEvent.target;
+                // Check if portal div exists (might take a moment to render)
+                if (!this.portalDiv) {
+                    this.portalDiv = document.querySelector('.nile-select-portal-append');
+                }
+                // Determine if click is inside the select or portal
+                const clickedInsideSelect = this.select?.contains(target);
+                const clickedInsidePortal = this.portalDiv?.contains(target);
+                // If clicked outside both select and portal, save and close
+                if (!clickedInsideSelect && !clickedInsidePortal) {
+                    if (validateOnSave && !this.select?.checkValidity()) {
+                        this.select?.reportValidity();
+                        return;
+                    }
+                    context.onSave(this.getCurrentValue());
+                }
+                // 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
+            });
+        }
     }
     /**
      * Parse value based on selection mode
@@ -3860,11 +3901,19 @@ class NileSelectEditor {
         // Remove all event listeners
         if (this.select) {
             this.eventListeners.forEach(({ event, handler }) => {
-                this.select?.removeEventListener(event, handler);
+                if (event === 'document-click') {
+                    // Remove from document for multi-select click handler
+                    document.removeEventListener('click', handler, true);
+                }
+                else {
+                    // Remove from select element
+                    this.select?.removeEventListener(event, handler);
+                }
             });
             this.eventListeners = [];
             this.select.remove();
             this.select = undefined;
+            this.portalDiv = undefined; // Clean up portal reference
         }
     }
     focus() {