Bootstrap Modal Restores Button Focus on Close

Bootstrap modal restores button focus on close

Resolved this by removing

d.trigger("focus")    

in bootstrap.min.js:

a.fn.modal = b, a.fn.modal.Constructor = c, a.fn.modal.noConflict = function() {
    return a.fn.modal = d, this
}, a(document).on("click.bs.modal.data-api", '[data-toggle="modal"]', function(c) {
    var d = a(this),
        e = d.attr("href"),
        f = a(d.attr("data-target") || e && e.replace(/.*(?=#[^\s]+$)/, "")),
        g = f.data("bs.modal") ? "toggle" : a.extend({
            remote: !/#/.test(e) && e
        }, f.data(), d.data());
    d.is("a") && c.preventDefault(), f.one("show.bs.modal", function(a) {
        a.isDefaultPrevented() || f.one("hidden.bs.modal", function() {
            d.is(":visible") && d.trigger("focus")
        })
    }), b.call(f, g, this)
})

Bootstrap modal saves but doesn't change focus back to main app

I figured out how to get this to work, and I know a lot of other people are looking at it as well, so here is how I did it. Thank you to glass duo for leading me in the right direction:

First, I used two different buttons to open the form:

<button ng-click="vm.openForm()" class="btn btn-xs btn-primary">Edit</button>
<button ng-click="vm.openForm(product._id)" class="btn btn-xs btn-warning">Edit</button>

I cleaned up the code in my controller, and used hidden.bs.modal to run the code to reload the page after the save:

vm.isSubmitted = false;
vm.formMode;

//set form mode to add or edit, display product info, if any, and show modal
    vm.openForm = function(id = null) {
        if(id) {
            //find product info
            vm.formMode = 'update';
            productDataFactory.productDisplay(id).then(function(response) {
            vm.product = response.data;
            console.log('Set vm.product from showUpdate', id);
            });
        } else if(id == null) {
            //populate blank form
            vm.formMode = 'add';
            vm.product = {};
            console.log('Generate blank form');
        }
        //display modal form
        $("#myModal").modal({backdrop: true});
    };

    vm.closeForm = function(){
        $('#myModal').modal('hide');
       $("#myModal").on('hidden.bs.modal', function () {
            vm.formMode = null; //reset form mode
            $route.reload();
    });

    };

    vm.saveProduct = function() {
        console.log('Product/event form save button pressed.');
        var postData =  {
            event: vm.product.event,
            division: vm.product.division,
            level: vm.product.level,
            day: vm.product.day,
            group: vm.product.group,
            numberofplayers: parseInt(vm.product.numberofplayers, 10),
            price: parseInt(vm.product.price, 10),
            description: vm.product.description,
            abbr: vm.product.abbr
        };
        if(vm.productForm.$valid) {
            //save new
            if(vm.formMode === 'add') {
                productDataFactory.postProduct(postData).then(function(response){
                    if (response.status === 201) {
                        console.log('Saved product successfully');
                    }
                }).catch(function(error){
                    console.log(error);
                });    
            //update existing
            } else if (vm.formMode === 'update') {
                console.log('Updating ', vm.product._id);
                productDataFactory.productUpdate(vm.product._id, postData).then(function(response){
                    if(response.status == 204) {
                        console.log('Updated product successfully');
                    }
                }).catch(function(error){
                    console.log(error);
                });
            }
            //close form & refresh page
            vm.closeForm();
        //show errors
        } else { 
            console.log('Invalid product form');
            vm.isSubmitted = true;
        }
    };

Finally, I set the save and cancel buttons to run the appropriate code:

<button type="submit" class="btn btn-primary"  ng-click="vm.saveProduct()">Save</button>
<button type="button" data-dismiss="modal" class="btn btn-default" ng-click="vm.closeForm()">Cancel</button>

If you have the form submitting to saveProduct() along with these buttons, you'll save the model twice, so pick one or the other.

It should be noted that while I'm using angularjs, I used the regular bootstrap modal instead of angular-ui-bootstrap's modal. Without using hidden-bs-modal, which allows you to run code AFTER the modal has closed, it just doesn't work refreshing the view with the updated code AND restoring active focus to the main view.

How to remove focus from a button after botstrap modal closed?

This might be kind of a hack, but if you just an id to your link, say modalLink, you could try the following:

$('#modalLink').on({
    focus: function () {
        $(this).blur();
    }
}); 

I think that that will just remove the focus whenever the focus is set, which might be OK in your case.

Bootstrap modal set focus on popup close to input in body

You just need to add setTimeout() function before calling focus() event for input.

In your code focus() method called right after bootstrap modal get closed, when DOM is not loaded properly.

$('#myModal').on('hidden.bs.modal', function() {
  setTimeout(function(){
      $('#focusMe').focus();
  },100);
});

Focus of Bootstrap Modal dialog when opening two nested modal lost

Found out the answer minutes after formulating the question. Anyway, if others have any better solution than this, please give me a suggestion. My thought is it should work by default.

$('#secondDialog').on('hidden.bs.modal', function(){
    $('#firstDialog').focus();
});

How to remove focus around buttons on click

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

Autofocus input in twitter bootstrap modal

I'm using Bootstrap 3.0 (hopefully, this works with 3.1 as well).

We had to use tabindex="-1" because that allows the ESC key to close the modal.

So I was able to fix this issue using:

// Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

---

Related Topics