Angular-Slickgrid下拉框过滤器在每次点击过滤器后在网格下方弹出额外的下拉框

Question

我使用的是Angular verion 11和Angular-Slickgrid版本2.23.0

我在Angular-Slickgrid中添加了一个下拉框过滤器。过滤器功能可以正常工作，但每次单击过滤器时，网格下方都会出现一个额外的下拉框，直到我刷新页面，它才会消失。

如果我不断点击过滤器，越来越多的额外下拉框会出现在彼此的顶部。它看起来只像网页上的一个额外的框，但当我打开html元素时，我可以看到生成的下拉列表元素。

​

​

我查看了Angular-Slickgrid官方关于过滤器的演示页面，每次我点击过滤器时，都会在html页面的底部生成一个带有位置的下拉元素，当我再次点击过滤器时，这个下拉元素就消失了。这是它应该工作的方式，但当我单击过滤器时，下拉框元素不会消失。

请看下面的源代码。在调试期间，我删除了所有不必要的代码，只留下一列，但问题仍然存在。这个问题存在于我的项目中的所有下拉框过滤器中。其他只包含文本的过滤器工作得很好。

​

​

​

​

非常感谢你的帮助。

Answer 1

对于任何有这个问题的人来说，在这里之外讨论过这个问题，结果证明是因为页面中有多个body。解释为什么这是问题，Angular-Slickgrid使用multiple-select.js外部库，下拉列表实际上是在过滤器输入下的位置，当我们说(位置)我们真的意味着下拉列表的重新定位(通过绝对位置)移动到输入下，在Angular-Slickgrid中我们使用容器作为body，因为这是唯一的方法使它显示在所有其他东西上，因此只能有一个body才能正常工作。

Angular-Slickgrid使用的默认多选选项包括

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