Bootstrap Select在Bootstrap Vue Modal内无法展开问题求助

Problem Description #

I’m using Bootstrap Vue alongside Bootstrap Select. The selector works perfectly outside a modal, but when placed inside a Bootstrap Vue Modal, the dropdown list won’t expand at all.

My Code #

JavaScript

Vue.component("suluct", { 
  template: "#suluct", 
  props: { 
    week: [String, Number], 
    year: [String, Number], 
  }, 
  mounted() { 
    const $selectpicker = $(this.$el).find('.selectpicker'); 
    $selectpicker 
      .selectpicker() 
      .on('changed.bs.select', () => this.$emit('changeWeek', this.options[$selectpicker.val()])); 
  }, 
  updated() { 
    $(this.$el).find('.selectpicker').selectpicker('refresh'); 
  }, 
  destroyed() { 
    $(this.$el).find('.selectpicker') 
      .off() 
      .selectpicker('destroy'); 
  }, 
  computed: { 
    options() { 
      // run some logic here to populate options 
      return [ 
        { title: "Sunday", value: "sunday", }, 
        { title: "Monday", value: "monday" } 
      ] 
    } 
  } 
}) 

new Vue({ el: "#app" })

HTML

<div id="app"> 
  <suluct></suluct> 
  <div> 
    <b-btn v-b-modal.modal1>Launch demo modal</b-btn> 
    <!-- Modal Component --> 
    <b-modal id="modal1" title="Bootstrap-Vue"> 
      <suluct></suluct> 
    </b-modal> 
  </div> 
</div> 

<script type="text/x-template" id="suluct"> 
  <select class="form-control selectpicker bs-select"> 
    <option v-for="(option, index) in options" :key="index" :value="option.value" :selected="option.selected"> 
      {{ option.title }} 
    </option> 
  </select> 
</script>

Solution #

Got it, let’s break down why this is happening and fix it.

The root issue is Bootstrap Vue’s modal behavior: by default, <b-modal> uses tabindex="-1" and enforces focus trapping to keep keyboard navigation inside the modal. But Bootstrap Select renders its dropdown menu outside the modal’s DOM tree (usually attached directly to <body>). This means the modal’s focus management blocks interaction with the dropdown because it’s not part of the modal’s focused context.

Here are two solid fixes to choose from:

1. Disable Focus Trapping on the Modal

The quickest fix is to add the no-enforce-focus prop to your <b-modal> to turn off the focus trapping. This lets the dropdown receive focus normally:

<b-modal id="modal1" title="Bootstrap-Vue" no-enforce-focus>
  <suluct></suluct>
</b-modal>

Note: This does relax some accessibility safeguards, so if your app needs to comply with accessibility standards, go with option 2 instead.

2. Attach the Dropdown Inside the Modal

A better, accessibility-friendly fix is to configure Bootstrap Select to render its dropdown menu within the modal’s container instead of <body>. You can do this by setting the container option when initializing selectpicker():

Update your component’s mounted hook like this:

mounted() {
  const $selectpicker = $(this.$el).find('.selectpicker');
  $selectpicker
    // Attach the dropdown to the modal's content area
    .selectpicker({ container: this.$el.closest('.modal-content') })
    .on('changed.bs.select', () => this.$emit('changeWeek', this.options[$selectpicker.val()]));
},

This keeps the dropdown inside the modal’s DOM context, so the modal’s focus trapping doesn’t block it. It maintains proper accessibility while fixing the dropdown issue.

Bonus: Keep Your Cleanup Logic

Good call on having the destroyed hook to clean up the Bootstrap Select instance—this prevents memory leaks, so keep that as is!

Either of these solutions should get your dropdown expanding inside the modal smoothly.

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