@stackline/angular-multiselect-dropdown 22.0.1 → 22.0.2

package/fesm2022/stackline-angular-multiselect-dropdown.mjs

@@ -1549,6 +1549,8 @@ class AngularMultiSelect {
         this.dropdownAppendedToBody = false;
         this.overlayListenersBound = false;
         this.overlayPositionTimer = null;
+        this.optionClickFromPointerDown = null;
+        this.optionClickGuardTimer = null;
         this.boundOverlayPositionUpdate = () => this.scheduleDropdownPositionUpdate();
         this.overlayThemeVariables = [
             '--ms-primary',
@@ -1976,9 +1978,71 @@ class AngularMultiSelect {
     }
     onDropdownPanelPointerDown(event) {
         if (this.isBodyOverlayEnabled()) {
+            var option = this.getPointerDownOption(event);
+            if (option) {
+                this.selectOptionFromPointerDown(option, event);
+                return;
+            }
             event.stopPropagation();
         }
     }
+    getPointerDownOption(event) {
+        var target = event && event.target;
+        if (!target || !target.closest) {
+            return null;
+        }
+        var option = target.closest('.dropdown-option');
+        if (!option || option.classList.contains('is-disabled')) {
+            return null;
+        }
+        return option;
+    }
+    selectOptionFromPointerDown(option, event) {
+        var pointerEvent = event;
+        if (event.type === 'pointerdown' && pointerEvent.button !== undefined && pointerEvent.button !== 0) {
+            event.stopPropagation();
+            return;
+        }
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        event.stopPropagation();
+        option.dispatchEvent(new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window
+        }));
+        this.ignoreNextNativeOptionClick(option);
+    }
+    ignoreNextNativeOptionClick(option) {
+        this.optionClickFromPointerDown = option;
+        if (this.optionClickGuardTimer) {
+            clearTimeout(this.optionClickGuardTimer);
+        }
+        this.optionClickGuardTimer = setTimeout(() => {
+            if (this.optionClickFromPointerDown === option) {
+                this.optionClickFromPointerDown = null;
+            }
+        }, 500);
+    }
+    shouldIgnoreNativeOptionClick(evt) {
+        if (!this.optionClickFromPointerDown || !evt || evt.type !== 'click') {
+            return false;
+        }
+        if (evt.currentTarget !== this.optionClickFromPointerDown) {
+            return false;
+        }
+        this.optionClickFromPointerDown = null;
+        if (this.optionClickGuardTimer) {
+            clearTimeout(this.optionClickGuardTimer);
+            this.optionClickGuardTimer = null;
+        }
+        if (evt.cancelable) {
+            evt.preventDefault();
+        }
+        evt.stopPropagation();
+        return true;
+    }
     getAriaLabel() {
         if (this.settings && this.settings.ariaLabel) {
             return this.settings.ariaLabel;
@@ -2621,6 +2685,9 @@ class AngularMultiSelect {
         //this.calculateDropdownDirection();
     }
     onItemClick(item, index, evt) {
+        if (this.shouldIgnoreNativeOptionClick(evt)) {
+            return;
+        }
         if (item.disabled) {
             return;
         }
@@ -2642,6 +2709,12 @@ class AngularMultiSelect {
             }
         }
         else {
+            if (this.settings.singleSelection) {
+                this.onTouchedCallback(this.selectedItems);
+                this.closeDropdown();
+                this.syncSelectAllState();
+                return;
+            }
             this.removeSelected(item);
             this.onDeSelect.emit(item);
         }
@@ -3194,6 +3267,11 @@ class AngularMultiSelect {
     }
     ngOnDestroy() {
         this.restoreDropdownPanel(true);
+        if (this.optionClickGuardTimer) {
+            clearTimeout(this.optionClickGuardTimer);
+            this.optionClickGuardTimer = null;
+        }
+        this.optionClickFromPointerDown = null;
         if (this.subscription) {
             this.subscription.unsubscribe();
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../../node_modules/ng-packagr/package.schema.json",
   "name": "@stackline/angular-multiselect-dropdown",
-  "version": "22.0.1",
+  "version": "22.0.2",
   "license": "MIT",
   "author": "Pradeep Terli (Original), Alexandro Paixao Marques (Maintainer)",
   "description": "Angular multiselect dropdown for Angular 22 with maintained release lines, accessibility-focused and keyboard/ARIA tested interactions, dialog-safe body overlays, Stackline skins, search, grouping, templates, headless helpers, and forms support.",
@@ -60,10 +60,6 @@
     "css-theme",
     "legacy-angular",
     "angular-compatibility",
-    "angular21",
-    "angular20",
-    "angular19",
-    "angular14",
     "angular2-multiselect",
     "angular2-multiselect-dropdown",
     "migration-friendly",
@@ -72,9 +68,10 @@
     "ngx-multiselect",
     "virtual-scroll",
     "angular22",
-    "angular 22"
+    "angular 22",
+    "angular-22"
   ],
-  "homepage": "https://alexandro.net/docs/angular/multiselect/",
+  "homepage": "https://alexandro.net/docs/angular/multiselect/angular-22/",
   "peerDependencies": {
     "@angular/core": ">=22.0.0 <24.0.0",
     "@angular/forms": ">=22.0.0 <24.0.0",
@@ -88,7 +85,7 @@
     "url": "https://github.com/alexandroit/angular-multiselect-dropdown/issues"
   },
   "engines": {
-    "node": ">=22.22.3"
+    "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
   },
   "module": "fesm2022/stackline-angular-multiselect-dropdown.mjs",
   "typings": "types/stackline-angular-multiselect-dropdown.d.ts",

package/types/stackline-angular-multiselect-dropdown.d.ts

@@ -408,6 +408,8 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     private dropdownAppendedToBody;
     private overlayListenersBound;
     private overlayPositionTimer;
+    private optionClickFromPointerDown;
+    private optionClickGuardTimer;
     private boundOverlayPositionUpdate;
     private overlayThemeVariables;
     id: any;
@@ -455,6 +457,10 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     private clearOverlayPositionTimer;
     private scheduleDropdownPositionUpdate;
     onDropdownPanelPointerDown(event: Event): void;
+    private getPointerDownOption;
+    private selectOptionFromPointerDown;
+    private ignoreNextNativeOptionClick;
+    private shouldIgnoreNativeOptionClick;
     getAriaLabel(): string;
     getListboxAriaLabel(): string;
     getSearchAriaLabel(): string;