angularfilterslickgridangular-slickgrid

Angular-Slickgrid drop down box filter pops extra drop down boxes below grid after each click on filter

I am using Angular verion 11 and Angular-Slickgrid version 2.23.0

I added a drop down box filter in Angular-Slickgrid. The filter function works with no problem, but each time I click the filter, an extra drop down box appears below the grid, and it does not go away until I refresh the page.

If I keep clicking the filter, more and more extra drop down boxes appear on top of each other. It looks like only one extra box on the web page, but when I open the html elements, I can see a list of drop down elements generated.

enter image description here

I check Angular-Slickgrid official demo page about filter, each time when I click the filter, there is a drop down element generated at the bottom of the html page with a position, when I click the filter again, the drop down element disappears. This is the way it should work, but the drop down box element does not disappear when I click the filter.

Please see the source code below. During debug I remove all unnecessary code to keep only one column left, but the problem still exist. This problem exists in all drop down box filters in my project. Other filters with only text works well.

enter image description here

enter image description here

Thanks a lot for help.

Solution

  • For whoever have this problem, it was discussed outside of here and it turned out to be because there was multiple body in the page. The explanation of why this is problem, Angular-Slickgrid uses multiple-select.js external library and the drop-down is actually position under the Filter input, when we say (position) we really mean re-position (by absolute position) of the drop list is moved under the input and in Angular-Slickgrid we use the container as body because that is the only way to make it show over everything else, hence there can only be one body for this to work properly.

    The default multiple-select options used by Angular-Slickgrid are

    const defaultOptions: MultipleSelectOption = {
  autoAdjustDropHeight: true,
  autoAdjustDropPosition: true,
  autoAdjustDropWidthByTextSize: true,
  container: 'body', // <<-- we use `body` for positioning over everything
  filter: false, 
  maxHeight: 275
};