@aquera/ngx-smart-table 0.0.14-alpha → 0.0.15-alpha

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

@@ -3613,6 +3613,8 @@ class NileSelectEditor {
         this.eventListeners = [];
         this.currentOptions = [];
         this.isInitializing = false; // Flag to prevent immediate close during initialization
+        this.hasSaved = false; // Flag to prevent double-save
+        this.lastSelectedValue = ''; // Track the last selected value
         // Handle Observable options
         if (isObservable(options.options)) {
             this.optionsSubscription = options.options.subscribe(opts => {
@@ -3709,6 +3711,8 @@ class NileSelectEditor {
         }
         // Set initializing flag to prevent immediate close
         this.isInitializing = true;
+        this.hasSaved = false;
+        this.lastSelectedValue = '';
         // Create NileSelect custom element using document.createElement
         this.select = document.createElement('nile-select');
         this.select.className = 'st-cell-editor';
@@ -3915,12 +3919,29 @@ class NileSelectEditor {
             return;
         const validateOnSave = this.options.validateOnSave !== false;
         // Prevent click events from bubbling up to the cell container
-        // This prevents parent handlers from interfering with nile-select's toggle
-        const clickHandler = (e) => {
+        const selectClickHandler = (e) => {
             e.stopPropagation();
         };
-        this.select.addEventListener('click', clickHandler);
-        this.eventListeners.push({ event: 'click', handler: clickHandler });
+        this.select.addEventListener('click', selectClickHandler);
+        this.eventListeners.push({ event: 'click', handler: selectClickHandler });
+        // For single-select with portal, listen to document mousedown to detect option selection
+        // Use mousedown because it fires before blur
+        if (!this.options.multiple) {
+            const documentMouseDownHandler = (e) => {
+                const composedPath = e.composedPath?.() || [];
+                // Look for nile-option in the event path
+                for (const el of composedPath) {
+                    if (el instanceof HTMLElement && el.tagName?.toLowerCase() === 'nile-option') {
+                        const optionValue = el.getAttribute('value') || el.value || '';
+                        this.lastSelectedValue = optionValue;
+                        return;
+                    }
+                }
+            };
+            // Add listener immediately (mousedown fires before blur, so no need for delay)
+            document.addEventListener('mousedown', documentMouseDownHandler, true); // capture phase
+            this.eventListeners.push({ event: 'document-mousedown', handler: documentMouseDownHandler });
+        }
         // Handle keyboard events (keydown is not replaced by custom events)
         const keydownHandler = (e) => {
             const keyEvent = e;
@@ -3932,43 +3953,45 @@ class NileSelectEditor {
         };
         this.select.addEventListener('keydown', keydownHandler);
         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();
+        // Use nile-blur event as save trigger for single-select
+        // Add a small delay to allow the value to update before reading
+        const singleSelectSaveHandler = (e) => {
+            // Don't save again if already saved
+            // Ignore events that fire during initialization (e.g. when setting initial value)
+            if (this.hasSaved || this.isInitializing) {
                 return;
             }
-            // Only save immediately for single-select
-            // Multi-select saves on outside click
+            // Only save for single-select
             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 });
-        // Handle blur as secondary save trigger - only for single-select
-        // Multi-select uses hide event instead
-        const blurHandler = (e) => {
-            // Ignore blur during initialization
-            if (this.isInitializing) {
-                return;
-            }
-            if (validateOnSave && !this.select?.checkValidity()) {
-                this.select?.reportValidity();
-                return;
-            }
-            // For single-select, save on blur (when clicking outside)
-            if (!this.options.multiple) {
-                context.onSave(this.getCurrentValue());
+                // Add a small delay to let the value update after selection
+                setTimeout(() => {
+                    // Check again after timeout in case saved by another handler
+                    if (this.hasSaved) {
+                        return;
+                    }
+                    if (validateOnSave && !this.select?.checkValidity()) {
+                        this.select?.reportValidity();
+                        return;
+                    }
+                    // Use lastSelectedValue if available, otherwise get from element
+                    const target = e.target;
+                    const value = this.lastSelectedValue || target?.value || this.select?.value || '';
+                    this.hasSaved = true;
+                    context.onSave(this.parseValue(value));
+                }, 50); // 50ms delay to allow value to update
             }
         };
-        this.select.addEventListener('nile-blur', blurHandler);
-        this.eventListeners.push({ event: 'nile-blur', handler: blurHandler });
+        // Listen to blur and nile-blur events for focus loss detection
+        // Nile web components emit nile-blur custom event instead of native blur
+        this.select.addEventListener('blur', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'blur', handler: singleSelectSaveHandler });
+        this.select.addEventListener('nile-blur', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'nile-blur', handler: singleSelectSaveHandler });
+        // Also listen to change events as fallback
+        this.select.addEventListener('nile-change', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'nile-change', handler: singleSelectSaveHandler });
+        this.select.addEventListener('change', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'change', handler: singleSelectSaveHandler });
         // Handle clear button if enabled
         if (this.options.clearable) {
             const clearHandler = (e) => {
@@ -4043,8 +4066,10 @@ class NileSelectEditor {
         return value;
     }
     destroy() {
-        // Reset initialization flag
+        // Reset flags
         this.isInitializing = false;
+        this.hasSaved = false;
+        this.lastSelectedValue = '';
         // Unsubscribe from options Observable
         if (this.optionsSubscription) {
             this.optionsSubscription.unsubscribe();
@@ -4057,6 +4082,10 @@ class NileSelectEditor {
                     // Remove from document for multi-select click handler (bubbling phase)
                     document.removeEventListener('click', handler, false);
                 }
+                else if (event === 'document-mousedown') {
+                    // Remove from document for single-select option mousedown handler (capture phase)
+                    document.removeEventListener('mousedown', handler, true);
+                }
                 else {
                     // Remove from select element
                     this.select?.removeEventListener(event, handler);