Bootstrap下拉高度没有随着数据的变化而更新-Angular

Question

很抱歉我转发了这篇文章，但由于缺少最少的可重复代码，我之前的问题被标记为已结束。我已经附上了一个堆叠链接与这个。

最初的问题-引导搜索选择下拉列表，但现在当我尝试搜索列表时，下拉列表在顶部打开，列表会减少并漂浮在空中

请不要关闭这个。这对我的项目非常重要，我已经在这个项目上坚持了16个小时。

我在Angular 8项目中使用引导程序下拉列表创建了一个自定义的搜索-选择下拉列表。该功能运行良好，但问题在于当下拉列表在元素顶部打开时。现在，当我使用搜索框进行搜索时，列表会相应地更新并缩短，但它一直漂浮在半空中。你可以在下面的GIF中看到这个问题。

发布GIF-https://i.stack.imgur.com/rE993.jpg

正如你在第一种情况下看到的，当我搜索时，列表被缩短了，它漂浮在半空中。我想要的是，当列表缩短时，它仍然直接显示在专家下拉按钮的上方，中间没有任何空格。

下面是我的HTML代码：

<div class="dropdown h-100" [ngClass]="{'statusDropdownContainer': config.src != 'unavailability'}">
<a class="btn btn-white dropdown-toggle mb-2 statusFilterDropdown h-100 w-100 flex-middle" [ngClass]="{'btnDisable': disable, 'srcUnavailability': config.src == 'unavailability' }" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="text-truncate">{{config.src != 'unavailability' ? config.dropdownTitle + ':' : ''}} {{selectedValue ? selectedValue : 'All'}}</span>
</a>
<div class="dropdown-menu w-100 pt-0" aria-labelledby="dropdownMenuButton">
<input type="text" class="w-100 p-2 searchInput" [ngModel]="searchValue" (ngModelChange)="filterDropdown($event)" placeholder="{{config.placeholder}}">
<a *ngFor="let option of filteredList; let i=index" class="dropdown-item pointer text-contain" [ngClass]="{'alternateBackground': i%2 == 0 }" (click)="selectValue(option.name, option.unique_code)">
{{option.name}} 
</a>
<div *ngIf="filteredList.length <=0" class="text-center text-muted mt-1">No {{config.user}} found</div>
</div>
</div>

我需要做哪些CSS更改？

Stacklitz-https://stackblitz.com/edit/angular-ivy-nghkhp?file=src/app/app.component.html

编辑：我找到了导致问题的确切问题。Bootstrap的下拉列表使用popperJS来定位下拉列表。PopperJS计算下拉列表在滚动事件上的位置，因此每当窗口滚动时，都会重新计算下拉列表的维度(使用转换CSS(。但在我的情况下，由于没有滚动，因此不会计算尺寸，下拉列表的高度与用户在搜索框中搜索内容之前的高度相同。但我想要的是，每当列表的数据发生变化时，都要重新计算维度。任何建议都会很有帮助。谢谢

Answer 1

Bootstrap的下拉列表使用popperJS来定位下拉列表。PopperJS计算下拉列表在滚动事件上的位置，因此每当窗口滚动时，都会重新计算下拉列表的维度(使用转换CSS(。

一种方法可以是使身体的高度略高于视口高度，然后通过编程触发ngModelChange 上的滚动

STACKBLITZ溶液

您可以添加到CSS(如果overflow-y: hidden;不需要，您也可以隐藏垂直滚动条(

body {
min-height: 101vh;
}

您可以在ngModelChange上的filterDropdown(e)方法中添加向下滚动1px和向上滚动1px，如下所示，以达到所需效果。

filterDropdown(e) {
console.log("e in filterDropdown -------> ", e);
window.scrollTo(window.scrollX, window.scrollY + 1);
let searchString = e.toLowerCase();
if (!searchString) {
this.filteredList = this.data.slice();
return;
} else {
this.filteredList = this.data.filter(
user => user.name.toLowerCase().indexOf(searchString) > -1
);
}
window.scrollTo(window.scrollX, window.scrollY - 1);
console.log("this.filteredList indropdown -------> ", this.filteredList);
}