Why is my select dropdown open by default while opening Bootstrap modal?

Question

I use Bootstrap modal and with fullcalendar. when I click to a day that opens a modal.

Inside the form I have dropdown select which open by default. when I select an option, it is doesn't close.

I think that modal show conflicts with select show functionality. when I inspect and checked off the display: block of .show .dropdown-menu the problem solved, but it is temporary.

$('#select-modal').modal('show');

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="modal fade" id="select-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="title" id="largeModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="select-from">
          <div class="col-lg-4 col-md-4 col-sm-8">
            <select name="pets" id="pet-select">
              <option value="">--Please choose an option--</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-simple btn-round waves-effect" data-dismiss="modal">CLOSE</button>
        <button type="button" class="btn mid-pink btn-round waves-effect">SAVE CHANGES</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Answer 1

Finally, i solved the issue. The problem was from .dropdown-menu, which a display: block.

On dayClick I add this code:

  $('#select-modal').modal('show');

  $('.dropdown-menu').addClass('d-none');

and now it is working.