feat: add outside click event configuration to ng-select component

- Introduced a new property `outsideClickEvent` to control the DOM event used for detecting outside clicks, defaulting to 'click'.
- Updated `NgDropdownPanelComponent` to utilize the new `outsideClickEvent` for improved outside click detection.
- Modified the HTML template to bind the `outsideClickEvent` property, enhancing flexibility in dropdown behavior.

This change improves the usability of the dropdown by allowing customization of the event used for closing the dropdown on outside interactions.

Author: pavankjadda

src/ng-select/lib/config.service.ts

@@ -18,4 +18,10 @@ export class NgSelectConfig {
 	clearSearchOnAdd: boolean;
 	deselectOnClick: boolean;
 	tabFocusOnClear = true;
+	/**
+	 * Controls which DOM event is used to detect outside clicks for closing the dropdown.
+	 * Defaults to 'click'. Set to 'mousedown' to handle early outside interactions
+	 * (useful when backdrops load on click and would otherwise close the dropdown).
+	 */
+	outsideClickEvent: 'click' | 'mousedown' = 'click';
 }

src/ng-select/lib/ng-dropdown-panel.component.ts

@@ -70,6 +70,10 @@ export class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
 	readonly footerTemplate = input<TemplateRef<any>>(undefined);
 	readonly filterValue = input<string>(null);
 	readonly ariaLabelDropdown = input<string | null>(null);
+	/**
+	 * Which DOM event to listen to for outside click detection
+	 */
+	readonly outsideClickEvent = input<'click' | 'mousedown'>('click');
 
 	readonly update = output<any[]>();
 	readonly scroll = output<{
@@ -229,7 +233,7 @@ export class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
 		}
 
 		this._zone.runOutsideAngular(() => {
-			fromEvent(this._document, 'click', { capture: true })
+			fromEvent(this._document, this.outsideClickEvent(), { capture: true })
 				.pipe(takeUntil(this._destroy$))
 				.subscribe(($event) => this._checkToClose($event));
 		});

src/ng-select/lib/ng-select.component.html

@@ -91,6 +91,7 @@
 		[bufferAmount]="bufferAmount()"
 		[appendTo]="appendToValue"
 		[position]="dropdownPosition()"
+		[outsideClickEvent]="outsideClickEvent()"
 		[headerTemplate]="headerTemplate()"
 		[footerTemplate]="footerTemplate()"
 		[filterValue]="searchTerm"

src/ng-select/lib/ng-select.component.ts

@@ -4,10 +4,10 @@ import {
 	ChangeDetectionStrategy,
 	ChangeDetectorRef,
 	Component,
-	effect,
+	computed,
 	contentChild,
 	contentChildren,
-	computed,
+	effect,
 	ElementRef,
 	forwardRef,
 	HostAttributeToken,
@@ -116,6 +116,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterVie
 	readonly clearAllText = input<string>(undefined);
 	readonly dropdownPosition = input<DropdownPosition>('auto');
 	readonly appendTo = input<string>(undefined);
+	readonly outsideClickEvent = input<'click' | 'mousedown'>(this.config.outsideClickEvent);
 	readonly loading = input(false, { transform: booleanAttribute });
 	readonly closeOnSelect = input(true, { transform: booleanAttribute });
 	readonly hideSelected = input(false, { transform: booleanAttribute });