<div class="d-flex justify-content-center align-items-center" style="height:10rem;">

  <button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init data-mdb-target="#modalAdd">

    Open modal

  </button>

  <div class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAdd" aria-hidden="true">

    <div class="modal-dialog  modal-lg" role="document">

      <div class="modal-content">

        <div class="modal-header text-center">

          <h4 class="modal-title w-100 fw-bold text-primary ml-5">Long modal</h4>

          <button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>          

        </div>

        <div class="modal-body">

          <select class=""  id="ddlPerson2" data-mdb-select-init >

            <option value="" disabled selected>THIS SELECT IS WORKING</option>

            <option value="1">Person1</option>

            <option value="2">Person2</option>

            <option value="3">Person3</option>

            <option value="4">Person4</option>

          </select>

          <div class=" m-2 p-2" style="height: 1500px; background-color: aquamarine;">

            <p>

              The select at the top of the page is working fine. The one at the bottom of this modal is not (always) working. If you need to scroll down the modal in order to see it, when selecting one of the available option the page is automatically scrolled back to the top and the option is not selected.

            </p>                      

            <p>

              This problem depends by the user's monitor size: this page may work fine in large monitors. If you zoom out the page, both Selects are working

            </p>

            <p>

              This issue is also quite herratic. On my experience it happens 2/3 of the times I refresh this page

            </p>

            <p>

              This div is 1500px long

            </p>

            <h4 class="text-center">

              Please scroll down...

            </h4>   

          </div>

          <select class=""  id="ddlPerson" data-mdb-container="#modalAdd" data-mdb-select-init >

            <option value="" disabled selected>THIS SELECT IS NOT WORKING</option>

            <option value="1">Person1</option>

            <option value="2">Person2</option>

            <option value="3">Person3</option>

            <option value="4">Person4</option>

          </select>

        </div>

      </div>

    </div>

  </div>

</div>

​