#67 Added autofocus support for input items in modal template

[Anonymous]

Originally created by: danieljabailey

I'm new to Angular and Bootstrap and was looking at this modal service. It mostly does what I wanted but it would only autofocus the input box the first time it appeared. I have added some code that looks for any inputs with the autofocus attribute, if it finds one then it focuses it.

At the moment this relies on a timeout. It doesn't work without the timeout but there may be a better way to get it to happen at the correct time, I don't know enough about angular or bootstrap to be able to come up with a better way.

The complex example should now autofocus the name box.

[Anonymous]

Originally posted by: coveralls

Coverage decreased (-7.58%) to 92.42% when pulling fc630e9d7c26968468666c4faf1b5ebec2d9f691 on danieljabailey:master into beb2c50f346296f082a6194b8fa9ea940c9f7848 on dwmkerr:master.

[Anonymous]

Originally posted by: dwmkerr

@danieljabailey Hi Daniel, thanks for this. If there is an element with an autofocus field elsewhere in the document tree, for example before and after the modal, this could interfere with the logic yes?

[Anonymous]

Originally posted by: danieljabailey

@dwmkerr Yeah, probably but it doesn't make much sense to have two things set to autofocus. You can only focus one of them at a time anyway.

[Anonymous]

Originally posted by: Xample

interesting branch, however I would refocus on the last element which was focused before the modal to open up.

Before we open the modal:

// Keep the current focused element
self.previousFocus = document.activeElement;

Right after we close it

// Set the focus back to the kept element (if any)
self.previousFocus && self.previousFocus.focus();

[Anonymous]

Originally posted by: rolek

My solution to this is:

//  We now have a modal object...
                    var modal = {
                        controller: modalController,
                        scope: modalScope,
                        element: modalElement,
                        close: closeDeferred.promise,
                        closed: closedDeferred.promise
                    };
                    angular.forEach(modalElement.find('input'), function(input) {
                        if (input.attributes.getNamedItem('autofocus')) {
                            input.focus();
                        }               
                    });
                    //  ...which is passed to the caller via the promise.
                    deferred.resolve(modal);

This allows you to have multiple modal templates on a single page and autofocus will work in each of them.