Bootstrap 5 从模态打开时弹出窗体输入被禁用

Question

当从模态元素启动弹出窗口时，我无法在弹出窗口的输入字段中输入任何内容。

由于某种原因，实际模式上最近的文本输入似乎占据了焦点。

我不明白为什么焦点会锁定到附近的只读输入元素？我把 popover 的 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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="[phone]" 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>

Answer 1

对于那些花一天时间在谷歌上搜索答案而没有正确阅读文档的其他人：

您想要设置显式自定义容器的另一种情况是模式对话框内的弹出窗口，以确保弹出窗口本身附加到模式。这对于包含交互元素的弹出窗口尤为重要——模态对话框会捕获焦点，因此除非弹出窗口是模态的子元素，否则用户将无法聚焦或激活这些交互元素。

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})