Bootstrap 4: выбрать с перекрытием с кнопкой

Question

У меня есть выпадающее меню, через которое видна кнопка. Когда я выбираю состояние из списка, я могу нажать кнопку в раскрывающемся меню. В чем проблема и как ее исправить?

html:

  <link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
    
    <div class="col-md-10"> 
    <select id="multiple-state" placeholder="Select state" multiple>
      <option value="al"/>Alabama</option>
      <option value="ak"/>Alaska</option>
      <option value="az"/>Arizona</option>   
    </select>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Display</button>
        <div class="dropdown-menu">
          <ul id="list" class="list-group list-group-flush"></ul>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Input city and press Enter" id="city">
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    var multipleCancelButton = new Choices('#multiple-state', {
    removeItemButton: true,
    searchResultLimit:5
    });
  });
</script>

Answer 1

Просто добавьте z-index в раскрывающийся список

$(document).ready(function() {
  var multipleCancelButton = new Choices('#multiple-state', {
    removeItemButton: true,
    searchResultLimit: 5
  });
});

.choices__list.choices__list--dropdown.is-active {
  z-index: 3;
}

<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>

<div class="col-md-10">
  <select id="multiple-state" placeholder="Select state" multiple>
    <option value="al" />Alabama</option>
    <option value="ak" />Alaska</option>
    <option value="az" />Arizona</option>
  </select>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Display</button>
      <div class="dropdown-menu">
        <ul id="list" class="list-group list-group-flush"></ul>
      </div>
    </div>
    <input type="text" class="form-control" placeholder="Input city and press Enter" id="city">
  </div>
</div>
</div>