How to focus an object after closing the modal bootstrap 4.x?

Question

I need to focus on an object after closing the modal bootstrap

In bootstrap.dialog (old) I can do because I can program in the close event of the close button close, but the close of bootstrap 4 is Generic.

The idea would be like below:

    $("#btneditar").on("click", function () {

        var codcli = $("#codcli").val();
        if (codcli <= 0) {

            $("#aviso").modal();
            $(".body-aviso").html("Escolha o cliente para editar");
            $("#codcli").focus();
        } else {

            url = "minha url";
            window.location = url;
        }
    });

As we know the line (obj)Focus lost focus when closing the modal

How to get around this situation?

Answer 1

Use the modal event when it is closed (documentation):

$('#aviso').on('hidden.bs.modal', function(){
   $("#codcli").focus();
});

The hidden.bs.modal performs a function after the modal is closed.

Example:

$("#btneditar").on("click", function () {

   var codcli = $("#codcli").val();
   if (codcli <= 0) {

      $("#aviso").modal();
      $(".body-aviso").html("Escolha o cliente para editar");
   
   } else {
      url = "minha url";
      window.location = url;
   }
});

$('#aviso').on('hidden.bs.modal', function(){
   $("#codcli").focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <p class="body-aviso"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<p>Clique no botão abaixo:</p>
<button id="btneditar">Editar</button>
<input id="codcli">

Answer 2

I have found a temporary solution and I will put to colleagues, who knows new ideas emerge...

var obj = null;    

$("#btneditar").on("click", function () {

    var codcli = $("#codcli").val();
    if (codcli <= 0) {

        $("#aviso").modal();
        $(".body-aviso").html("Escolha o cliente para editar");
        obj = $("#codcli");
    } else {

        url = "minha url";
        window.location = url;
    }
});

$("#btnclose").on("blur", function(){
   $(obj).focus();
});

I create an empty object and fill in the warning message, when the close button is blurred (on close) the focus goes to the set object, so it worked, it looks POG but it works.