@linzjs/step-ag-grid 30.0.0 → 30.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "30.0.0",
+  "version": "30.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -45,7 +45,6 @@ const FilterUI: React.FC<FilterUIProps> = ({
   return (
     <div className="GridFilterColsMultiSelect">
       <span className="LuiSelect-label-text">Filter column</span>
-
       <LuiCheckboxInput
         className="LuiCheckboxInput-selectAll"
         label={'Select All'}
@@ -75,6 +74,9 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   private gui!: HTMLElement;
   private labelFormatter?: (value: string) => string;
   private reactRoot: Root | null = null;
+  private filterButtonClickListener: ((e: Event) => void) | null = null;
+  private filterButton: Element | null = null;
+  private hasOpened = false;
 
   private normalizeCellValue(value: unknown): string {
     if (typeof value === 'string') return value.trim() === '' ? EMPTY_KEY : value;
@@ -123,11 +125,31 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
     this.gui = document.createElement('div');
     this.reactRoot = createRoot(this.gui);
     this.render();
+    this.setupFilterButtonListener();
+  }
+
+  private setupFilterButtonListener(): void {
+    const columnId = this.params.column.getColId();
+    this.filterButton = document.querySelector(`[col-id="${columnId}"] .ag-header-cell-filter-button`);
+
+    if (this.filterButton) {
+      this.filterButtonClickListener = (e: Event) => {
+        if (this.hasOpened) {
+          e.stopPropagation();
+          e.preventDefault();
+          this.params.api.hidePopupMenu();
+          this.hasOpened = false;
+        } else {
+          this.hasOpened = true;
+        }
+      };
+
+      this.filterButton.addEventListener('click', this.filterButtonClickListener, true);
+    }
   }
 
   private render(): void {
     if (!this.reactRoot) return;
-
     this.reactRoot.render(
       <FilterUI
         allValues={this.allValues}
@@ -196,6 +218,12 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   }
 
   destroy(): void {
+    if (this.filterButtonClickListener && this.filterButton) {
+      this.filterButton.removeEventListener('click', this.filterButtonClickListener, true);
+      this.filterButtonClickListener = null;
+      this.filterButton = null;
+    }
+
     if (this.reactRoot) {
       this.reactRoot.unmount();
       this.reactRoot = null;

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -159,7 +159,11 @@ const filterGridUsingColumnFilter = async (filterString: string): Promise<void>
   });
   const headerCellFilterButton = await findQuick({ classes: `.ag-header-cell-filter-button` });
   await expect(headerCellFilterButton).toBeInTheDocument();
-  await user.click(headerCellFilterButton);
+  // Check if menu is already open
+  const existingMenu = document.querySelector('.ag-menu');
+  if (!existingMenu) {
+    await user.click(headerCellFilterButton);
+  }
   const canvas = within(document.body);
   const regex = new RegExp(filterString, 'i'); // case‑insensitive
   const filterCheckbox = await canvas.findByRole('checkbox', { name: regex });