弹出窗口中的Bootstrap 4输入字段 [英] Bootstrap 4 input field in popover

问题描述

问题在标题中描述.我有一个 Bootstrap 4 模式和一个带有按钮的输入字段的弹出窗口.在 IE 11 中一切正常，但在 Firefox 中输入失去焦点.

弹出框:

$('[data-toggle="popover"]').popover({容器:身体"，消毒:假，内容:函数(){return $("#choose-user-popover-content").html();}}).on('shown.bs.popover', function () {$('#ExecutorSNPSearchStr').focus();});

弹出框 html:

<div id="choose-user-popover-content" style="display: none;"><div class="row"><div class="col"><div class="input-group"><input type="text" class="form-control" id="ExecutorSNPSearchStr" aria-scribedby="ExecutorSNPSearchStrAddon"/><div class="input-group-append" id="ExecutorSNPSearchStrAddon"><button class="btn btn-sm btn-outline-info w-3" type="button"><i class="fas fa-search"></i><button class="btn btn-sm btn-outline-danger w-3" type="button"><i class="fas fa-trash-alt"></i>

https://i.stack.imgur.com/rTe2q.png

谁能告诉这是什么原因，以及如何解决这个问题?

UPD: 我在一个单独的 html 文件中重新创建了这种情况.

$(function () {$('[data-toggle="popover"]').popover({消毒:假，内容:函数(){返回 $("#PopoverContent").html();}});}).on('shown.bs.popover', function () {$('#ExecutorSNPSearchStr').focus();});

<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=不"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><部分><div id="PopoverContent" style="display: none;"><div class="input-group"><input type="text" class="form-control" placeholder="收件人的用户名"aria-label="收件人的用户名，带有两个按钮插件" aria-describedby="button-addon1"><div class="input-group-append" id="button-addon1"><button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"data-html="true" data-title="搜索"><i class="fas fa-search"></i>