Ag-Grid 在与下拉菜单交互期间保持自定义过滤器打开

Question

I have a custom filter component I'm giving Ag grid for each column. The component contains a dropdown. When user selects an option from dropdown, the filter closes immediately on selection rather than staying open like it should.

How can I keep the filter component to stay open on selection of option from dropdown?

Answer 1

Reading the docs more, I found the answer here: https://www.ag-grid.com/javascript-data-grid/component-filter/#custom-filters-containing-a-popup-element

Custom Filters Containing a Popup Element Sometimes you will need to create custom components for your filters that also contain popup elements. This is the case for Date Filter as it pops up a Date Picker. If the library you use anchors the popup element outside of the parent filter, then when you click on it the grid will think you clicked outside of the filter and hence close the column menu.

There are two ways you can get fix this problem:

• Add a mouse click listener to your floating element and set it to preventDefault(). This way, the click event will not bubble up to the grid. This is the best solution, but you can only do this if you are writing the component yourself.

• Add the ag-custom-component-popup CSS class to your floating element. An example of this usage can be found here: Custom Date Component