SweetAlert, Focusing an input after Confirm

Question

Basically I have a form where you can add an User.

<div class="container">
    <div><h1>Formulario para agregar Usuarios</h1></div>
  <form id='addForm' role="form" method="POST">
    <div class="form-group col-lg-6">

        <div class="form-group ">
            <label for="nombre">Nombre:</label>
            <input class="form-control" type="text" id="nombre" name="nombre" maxlength="15" placeholder="Ingrese su Nombre"/>
            <div id="nom" name="nom"></div>
        </div>
        <div class="form-group">
            <label for="apellido">Apellido:</label>            
            <input class="form-control" type="text" id="apellido" name="apellido" maxlength="15" placeholder="Ingrese su Apellido" />
            <div id="ape" name="ape"></div>
        </div>
        <div class="form-group">
            <label for="correo">Correo:</label>
            <input class="form-control" type="email" id="correo" name="correo" maxlength="30" placeholder="[email protected]"/>
            <div id="cor" name="cor"></div>
        </div>
        <div class="form-group">
            <label for="password">Contraseña:</label>            
            <input class="form-control" type="password" id="password" name="password" maxlength="15" placeholder="Ingrese una Contraseña (mínimo 6 caracteres)" />
            <div id="pas" name="pas"></div>
        </div>      
        <div class="form-group">
        <button class="btn btn-default col-sm-2" id="addUser" name="addUser" type="submit" >
           <span class="glyphicon glyphicon-plus-sign"></span> Agregar</button>
        </div>

           <div class="form-group col-sm-8" id="userData" name="userData"></div>         

    </div>

After success a sweet alert appears on screen telling you the add worked.

Before the swal I had a normal alert, and after showing success It would focus on the first input of the form.

But now when the swal shows up, It gives the focus while swal's on screen and when you click the confirm button the focus is gone.

I tried to set onConfirmButton to false and then add a function

$.post('agregar.php', {nombre: nombre, apellido: apellido, correo: correo, password: password}, function(data) {
            //Se recibe un resultado (data) y se muestra en el div
            //(que en este caso sería una cadena string con algún mensaje)
            if (data=='1') {
                //swal("¡Hecho!", "¡Has Agregado un Usuario Nuevo!", "success");
                swal({
                    title: "¡Hecho!",
                    text: "¡Has Agregado un Usuario Nuevo!",
                    closeOnConfirm: false
                },
                    function(){
                        swal.close();
                        $('#nombre').val('')
                        $('#apellido').val('');
                        $('#correo').val('');
                        $('#password').val('');
                        $('#nombre').focus();

                    })
                );

But it just doesn't work.

Answer 1

Use promise with "then" function like: .then(function(){ just before closing the swal function with ";".

Using your code, it will be like that:

swal({
    title: "¡Hecho!",
    text: "¡Has Agregado un Usuario Nuevo!",
    closeModal: false
}).then(function() {
        swal.close();
        $('#nombre').val('')
        $('#apellido').val('');
        $('#correo').val('');
        $('#password').val('');
        $('#nombre').focus();
});