Popover with focues input field

by reeson46

HTML

<a tabindex="0" id="input-index" class="btn btn-primary" role="button">
  New
</a>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">
</script>

JavaScript

$(document).ready(function() {
  var options = {
    html: true,
    sanitize: false,
    placement: "bottom",
    content: '<input id="newboard" class="card subtask-lb bg-dark text-light" type="text" placeholder="Enter new Board" />'
  }

  $('#input-index').popover(options).on('shown.bs.popover', function() {
    $('#newboard').focus();
  });
});

$('body').on('click', function(e) {
  $('#input-index').each(function() {
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});