当弹出窗口从模态元素启动时，我在弹出窗口的输入字段中输入任何内容时遇到问题。
看起来实际模态上最近的文本输入由于某种原因占据了焦点。
我不明白为什么焦点会被锁定在附近的只读输入元素上？我把弹出窗口的html放在哪里似乎也不重要。

//init popover
var exampleEl = document.getElementById('locate-change-recipient-btn')
var popover = new bootstrap.Popover(exampleEl, {
  html: true,
  sanitize: false,
  title: "Input New Telephone Number",
  content: $('[data-name="popover-content"]')
});

// Open Modal
var testScreen = new bootstrap.Modal(document.getElementById('testScreen'));
testScreen.show();

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="testScreen" tabindex="-1" aria-labelledby="testScreenLabel" aria-hidden="true" data-bs-theme="dark" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-fullscreen modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="testScreenLabel">Modal Title</h1>
      </div>
      <div class="modal-body">

        <div class="mb-3">
          <label class="form-label">Tel:</label>
          <form class="row">
            <div class="col-sm-7 input-group-sm">
              <input type="text" class="form-control" id="recipient-tel" value="+44741100000" readonly />
            </div>
            <div class="col-sm-5">

              <a tabindex="0" id="locate-change-recipient-btn" class="btn btn-sm btn-warning" role="button">Change Recipient</a>

              <!-- Change Recipient input form -->
              <div style="display:none;">
                <div data-name="popover-content">
                  <div class="col-sm-12 input-group-sm">
                    <input type="tel" name="new-recipient-tel-input" id="new-recipient-tel-input" class="form-control" aria-label="Phone number input" placeholder="Phone number..." tabindex="-1" />
                  </div>
                  <button class="btn btn-sm btn-success" id="locate-new-receipient-tel-btn">Confirm</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>