Adding focus to modal-window in modalWindow directive new in 0.10.0

[dougmcclurg]

I recently upgraded my modal directive from 0.6.0 to 0.10.0.

My usage involves focusing an input inside the modal on launch which i was previously able to do in 0.6.0.

The addition of the below code in the modal directive in 0.10.0 does not allow me to focus on my input.

// focus a freshly-opened modal
element[0].focus();

The only things i can do to get around this are particularly messy and i was wondering if adding focus to the modal-window could be a configurable option?

If anybody has a clean way of solving i'd love to hear about it.

Thanks for all your killer work.

[mvhecke]

Could you provide a minimal reproducible scenario in Plunker please?

[pkozlowski-opensource]

@dougmcclurg ok, I see. This one is tricky as we need to focus the modal window to get the focus away from a link / button that actually trigger modal opening. Need to check what the original bootstrap is doing in this case (and would appreciate you digging into this as well!)

[tjgrathwell]

👍 to this issue: I was using 'autofocus' in some of the elements on my modals and this no longer works since we upgraded to 0.9.0, unless we re-assert focus after some hefty delay.

It would be nice to determine exactly what behavior happened after the modal appears, rather than just doing element[0].focus() always.

Traditional bootstrap modals allow you to install behavior on a 'shown' event when you know the to-be-focused elements are rendered and ready for focus. I'm not sure if this is best in Angular-land, where it's probably better for the to-be-focused element to declare its desires the template via the autofocus attribute. But either way, the element[0].focus() is disruptive.

For now, I've implemented the following workaround

angular.module('ui.bootstrap.modal').directive('modalWindow', function ($timeout) {
  return {
    priority: 1,
    link: function (scope, element, attrs) {
      $timeout(function () {
        element.find('[autofocus]').focus();
      });
    }
  };
});

which re-asserts autofocus after element[0].focus() has run.

[Uplink03]

Line 94 modal.js does the focus that prevents/overrides my focus. Can we get a hook after that please?

For the moment I'll just "patch" the file with a line after your focus so it does element.find('input:visible:first').focus(); as that seems to be all I need.

[vbauer]

👍 to this issue

[pkozlowski-opensource]

@wattsbn what do you mean by "closed"? This issue is still open, it has a pull request #1892 that hopefully is going to be merged, pending response from the author.

[bettysteger]

with the latest stable versions autofocus does work again!

[nstuyvesant]

As of 2.2+, autofocus stopped working. 2.1.4 is working OK.

[Fernandolcs]

For me, autofocus only did work for the very first time I opened the modal, all next ones the focus did not work. I ended up implementing this and it worked fine.