@alaarab/ogrid-angular 2.4.1 → 2.4.2

package/dist/esm/index.js

@@ -5221,6 +5221,7 @@ var BaseInlineCellEditorComponent = class {
     this.highlightedIndex = signal(0);
     this.selectOptions = signal([]);
     this.searchText = signal("");
+    this.scrollCleanup = null;
     this.filteredOptions = computed(() => {
       const options = this.selectOptions();
       const search = this.searchText().trim().toLowerCase();
@@ -5260,12 +5261,14 @@ var BaseInlineCellEditorComponent = class {
         richSelectInput.focus();
         richSelectInput.select();
         this.positionFixedDropdown(this.richSelectWrapper, this.richSelectDropdown);
+        this.attachScrollClose(this.richSelectWrapper?.nativeElement);
         return;
       }
       const selectWrap = this.selectWrapper?.nativeElement;
       if (selectWrap) {
         selectWrap.focus();
         this.positionFixedDropdown(this.selectWrapper, this.selectDropdown);
+        this.attachScrollClose(selectWrap);
         return;
       }
       const el = this.inputEl?.nativeElement;
@@ -5282,6 +5285,21 @@ var BaseInlineCellEditorComponent = class {
       }
     });
   }
+  ngOnDestroy() {
+    this.scrollCleanup?.();
+  }
+  /** Attach scroll listeners to close the editor when the grid scrolls. */
+  attachScrollClose(wrapper) {
+    if (!wrapper) return;
+    const scrollParent = wrapper.closest(".ogrid-table-wrapper") ?? wrapper.closest('[style*="overflow"]');
+    const handleScroll = () => this.cancel.emit();
+    if (scrollParent) scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    this.scrollCleanup = () => {
+      if (scrollParent) scrollParent.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }
   commitValue(value) {
     this.commit.emit(value);
   }

package/dist/types/components/base-inline-cell-editor.component.d.ts

@@ -25,12 +25,16 @@ export declare abstract class BaseInlineCellEditorComponent<T = unknown> {
     readonly highlightedIndex: import("@angular/core").WritableSignal<number>;
     readonly selectOptions: import("@angular/core").WritableSignal<unknown[]>;
     readonly searchText: import("@angular/core").WritableSignal<string>;
+    private scrollCleanup;
     readonly filteredOptions: import("@angular/core").Signal<unknown[]>;
     private _initialized;
     ngOnInit(): void;
     ngOnChanges(): void;
     private syncFromInputs;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Attach scroll listeners to close the editor when the grid scrolls. */
+    private attachScrollClose;
     commitValue(value: unknown): void;
     onTextKeyDown(e: KeyboardEvent): void;
     getDisplayText(value: unknown): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.4.1"
+    "@alaarab/ogrid-core": "2.4.2"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",