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

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div  id="select-modal" tabindex="-1" role="dialog">
  <div  role="document">
    <div >
      <div >
        <h4  id="largeModalLabel">Modal title</h4>
      </div>
      <div >
        <form  id="select-from">
          <div >
            <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 >
        <button type="button"  data-dismiss="modal">CLOSE</button>
        <button type="button" >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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

CodePudding user response：

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.