@ng-select/ng-select 21.5.0 → 21.5.2

package/README.md

@@ -18,6 +18,7 @@ See [Demo](https://ng-select.github.io/ng-select) page.
 
 | Angular          |     ng-select      |
 |------------------|:------------------:|
+| >=22.0.0 <23.0.0 |      v22.x.x       |
 | >=21.0.0 <22.0.0 |      v21.x.x       |
 | >=20.0.0 <21.0.0 | <=15.1.3, >=20.0.1 |
 | >=19.0.0 <20.0.0 |       v14.x        |
@@ -270,7 +271,7 @@ map: {
 | (search) | Fired while typing search term. Outputs search term with filtered items |
 | (open)  | Fired on select dropdown open |
 | (remove)  | Fired when item is removed while `[multiple]="true"` |
-| (scroll)  | Fired when scrolled. Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list. |
+| (scroll)  | Fired when scrolled (only when `[virtualScroll]="true"`). Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list. |
 | (scrollToEnd)  | Fired when scrolled to the end of items. Can be used for loading more items in chunks. |
 
 

package/fesm2022/ng-select-ng-select.mjs

@@ -1436,16 +1436,17 @@ class ItemsList {
             return groups;
         }
         // Check if items are already grouped by given key.
-        if (Array.isArray(items[0].value[prop])) {
+        const firstValue = items[0].value;
+        if (firstValue != null && Array.isArray(firstValue[prop])) {
             for (const item of items) {
-                const children = (item.value[prop] || []).map((x, index) => this.mapItem(x, index));
+                const children = (item.value?.[prop] || []).map((x, index) => this.mapItem(x, index));
                 groups.set(item, children);
             }
             return groups;
         }
         const isFnKey = isFunction(this._ngSelect.groupBy());
         const keyFn = (item) => {
-            const key = isFnKey ? prop(item.value) : item.value[prop];
+            const key = isFnKey ? prop(item.value) : item.value?.[prop];
             return isDefined(key) ? key : undefined;
         };
         // Group items by key.
@@ -1989,6 +1990,8 @@ class NgOptionComponent {
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
         this.elementRef = inject((ElementRef));
         this.label = signal('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        /** True when this component's inputs are initialized (after first change detection). */
+        this.isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
         afterEveryRender(() => {
             // Update label signal after render (innerHTML updated by template bindings)
             const currentLabel = (this.elementRef.nativeElement.innerHTML || '').trim();
@@ -1997,6 +2000,9 @@ class NgOptionComponent {
             }
         });
     }
+    ngOnInit() {
+        this.isInitialized.set(true);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOptionComponent, isStandalone: true, selector: "ng-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2656,6 +2662,10 @@ class NgSelectComponent {
     _setItemsFromNgOptions() {
         effect(() => {
             const options = this.ngOptions();
+            // Wait until all ng-option inputs are initialized (avoids _groupBy crash when values load async)
+            if (options.length > 0 && !options.every((opt) => opt.isInitialized())) {
+                return;
+            }
             this.bindLabel.set(this._defaultLabel);
             const items = options.map((option) => ({
                 $ngOptionValue: option.value(),