The issue is outlined in the title. I am facing a problem where an input field loses focus within a Bootstrap 4 modal and popover setup, specifically in Firefox but not in IE 11.
Popover:
$('[data-toggle="popover"]').popover({
container: "body",
sanitize: false,
content: function () {
return $("#choose-user-popover-content").html();
}
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});
Popover content 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-describedby="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>
<button class="btn btn-sm btn-outline-danger w-3" type="button">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
https://i.sstatic.net/rTe2q.png
Could someone provide insight into what might be causing this issue and suggest possible solutions?
UPD: I have replicated the scenario in a separate HTML file.
$(function () {
$('[data-toggle="popover"]').popover({
sanitize: false,
content: function () {
return $("#PopoverContent").html();
}
});
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});Your additional code here...