Selectpicker dropdown is overlapping the select input when it has a parent with overflow auto

[mrtawil]

Hello guys,

Environment:

• Selectpicker: 1.13.18
• Bootstrap: 4.5.0
• Popper Js: 1.16.1

Reproduction:
Place selectpicker inside a table row and wrap the table with class table-responsive.

Code:

<div class="form-group">
  <label class="font-weight-bold text-capitalize" for="units">Units</label>
  <div class="table-responsive">
    <table class="table table-bordered mb-0" id="units">
      <thead>
        <tr>
          <th class="text-capitalize" width="100%">Unit*</th>
          <th style="width:70px;"><a href="javascript:;" id="add_row" class="d-flex justify-content-center align-items-center" v-on:click="_addDefaultUnitSelected()"><i class="fa fa-plus-square fa-2x"></i></a></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(unitSelected, index) in unitsSelected">
          <td>
            <select name="unit_id[]" v-model="unitSelected.unit_id" data-label="unit_id" class="form-control selectpicker" data-size="7" data-live-search="true" data-container="body">
              <option value="">Select</option>
              <option :value="unit.id" :class="[unitSelectedIds.includes(unit.id) && unitSelected.unit_id != unit.id ? 'd-none' : '']" v-for="unit in units">
                <template>@{{unit.name}}</template>
              </option>
            </select>
          </td>
          <td style="vertical-align: middle;">
            <a href="javascript:;" class="d-flex justify-content-center align-items-center" v-on:click="_removeUnitSelected(index)" data-label="button-delete"><i class="fa fa-minus-square fa-2x"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Result:

Desired:

Claim:
If I remove class table-responsive, the dropdown will be positioned right but I will breakdown the layout on mobile screen.

[jadamec]

Any changes on this? Nearly 2 years old...

[NicolasCARPi]

@jadamec please read this: #2228 (comment)