feat: add outside click event configuration to ng-select component (ng-select#2715)

* feat: update Angular dependencies to version 20.3.6

* fix: update Angular ESLint and other dependencies to latest versions

* fix: update Node engine compatibility in package.json

* fix: update Node engine compatibility in package.json

* fix: update Node version in CI configuration to 22

* 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.

* docs: add documentation for outside click event type configuration in README

- Added a new entry for `outsideClickEventType` in the README to document its purpose and default value.
- This update enhances the clarity of the dropdown component's configuration options, providing users with better guidance on customizing outside click detection behavior.

---------

Co-authored-by: Pavan Kumar Jadda <17564080+pavankjadda@users.noreply.github.com>

Author: saibaburaavi

README.md

@@ -241,6 +241,7 @@ map: {
 | [selectOnTab]               | `boolean`                                            | `false`             | no | Select marked dropdown item using tab. Default `false`                                                                                                                                         |
 | [tabFocusOnClearButton]     | `boolean`                                            | `true`              | no | Control tab navigation behavior for the clear button. Default `true`                                                                                                                           |
 | [openOnEnter]               | `boolean`                                            | `true`              | no | Open dropdown using enter. Default `true`                                                                                                                                                      |
+| outsideClickEventType       | `'click'` \| `'mousedown'`                           | `'click'`           | no | Configure which DOM event type is used for outside click detection. Use `'mousedown'` to fix issues with backdrop/loading overlays that appear on dropdown open                               |
 | [typeahead]                 | `Subject`                                            | `-`                 | no | Custom autocomplete or advanced filter.                                                                                                                                                        |
 | [minTermLength]             | `number`                                             | `0`                 | no | Minimum term length to start a search. Should be used with `typeahead`                                                                                                                         |
 | typeToSearchText            | `string`                                             | `Type to search`    | no | Set custom text when using Typeahead                                                                                                                                                           |

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 });