如何解决selectpicker单选项需滚动及空值显示问题

我使用的selectpicker会根据参数动态显示不同数量的选项，并且已经通过data-live-search="true"开启了搜索功能。现在遇到一个问题：当下拉列表里只有单个选项时，仍然需要滚动才能看到这个选项，很容易被用户误以为搜索没有结果。

我试过两种方法但都没解决：

• 用CSS设置overflow-y: visible !important，完全没效果；
• 尝试调用selectpicker('refresh')移除空选项来让列表正常显示，但即使先销毁再重新初始化selectpicker，还是会改变原本的渲染效果。

我的技术栈如下：

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/i18n/defaults-*.min.js"></script>

Bootstrap v5.1.0

附应用截图（可见默认滚动条，必须滚动才能访问唯一选项）：

相关JavaScript代码：

$('.selectpicker').on('hidden.bs.select', function() {
     $(this).closest('.bootstrap-select').find('.dropdown-menu').attr('hidden', true);
});

$('.selectpicker').on('shown.bs.select', function() {
     $(this).closest('.bootstrap-select').find('.dropdown-menu').attr('hidden', false);
});

selectpicker的PHP渲染代码：

<select name="materiel[]" class="selectpicker form-control" id="materiel_autre" data-live-search="true" multiple>
     @foreach($type_materiels as $type)
          @if($type->id == 2)
               @foreach($type->sous_type as $ss_type)
                    @foreach($ss_type->materiel as $materiel)
                         @if($materiel->site_id == $site->id)
                              <option value="{{$materiel->id}}">{{$materiel->libelle}}</option>
                         @endif
                    @endforeach
               @endforeach
          @endif
     @endforeach
</select>

请问有没有解决这个问题的可行方案？

内容的提问来源于stack exchange，提问作者Romain