Cannot focus on input element of modal form after using uib-dropdown

[ndrsv]

Bug description:

In brief, triggering a modal form after using a uib-dropdown on the page makes it impossible to focus on the form input.

Try the following in the provided plunker:

1. Click button (A) to activate modal form.

2. Click on the input & it focuses

3. Click the uib-dropdown button 'Select' (no need to select menu button (B))

4. Click button (A) again. It is not possible to focus on the input

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/Aa8zqYgrqd5o0a1yy4EU?p=preview

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8

UIBS: 2.3.1

Bootstrap: 3.3.7

Other comments

It used to work in UIBS 2.2.0.

[brik]

Also experiencing the same problem in UIBS 2.3.1, works in 2.2.0.

[jacobharasimo]

same experience. v2.3.0 works and 2.3.1 breaks.

assume this is related #6295 by @ajpz 8a4f625

[nimamarashi]

Same here. After opening the uib-dropdown, inputs lose their focus on mouseup. Input does not to be necessarily on a modal. Any input on same page or even after routing to another page does not accept focus after opening the uib-dropdown.
Angular: 1.5.9
angular-bootstrap: 2.3.1

[580]

Same problem. Also happens on Getting Started Page:
https://angular-ui.github.io/bootstrap/#/dropdown

Drop down element always get focused.

[adybionka]

I had the same problem, and after spending half of my working day I found reason. Please look at the source code of dropdown https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js and you can find focusToggleElement function which is invoked untidy when you use uib-dropdown-toggle directive on <a> tag which has href attribute. To workaround this bug just remove href attriibute from link.

This piece of code works for me:

<div uib-dropdown>
    <a uib-dropdown-toggle>Open menu</a>
    <ul uib-dropdown-menu >
        <li>...</li>
    </ul>
</div>

[jacobharasimo]

Bug for me happened even when focus on a input inside modal so I think you issue is separate

…

On Wed, Dec 14, 2016, 8:29 AM Andrzej Dybionka ***@***.***> wrote: I had the same problem, and after spending half of my working day I found reason. Please look at the source code of dropdown https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js and you can find focusToggleElementfunction which is invoked untidy when you use uib-dropdown-toggle directive on <a> tag which has hrefattribute. To workaround this bug just remove href attriibute from link. This piece of code works for me: <div uib-dropdown> <a uib-dropdown-toggle>Open menu</a> <ul uib-dropdown-menu > <li>...</li> </ul> </div> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#6364 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAh7gl_1Yirym_zoOmbDeUSEz3oEzKNBks5rH-9CgaJpZM4LLljW> .

[adybionka]

It is the same reason: focusToggleElement. Just focusToggleElement is invoked in some circumstances but should't. I didn't analyze dropdown menu code deeply, but I found case when focusToggleElement is not invoked when as element with directive uib-dropdown-menu you use <a> tag without href attribute (what of course is invalid html). To test it replace this piece of code:

  <button type="button" class="btn btn-primary dropdown-toggle" uib-dropdown-toggle>
    <span translate>Select</span>
    <span class="caret"></span>
  </button>

by this

  <a class="btn btn-primary dropdown-toggle" uib-dropdown-toggle>
    <span translate>Select</span>
    <span class="caret"></span>
  </a>

here https://plnkr.co/edit/Aa8zqYgrqd5o0a1yy4EU?p=preview

Of course this is only workaround and bug should be fixed by authors of ui-bootstrap.

[StefanAndjelic]

@adybionka spot on! Looks like the culprit is in dropdown.js on line 108. The closeDropdown is being invoked on document.click so it focuses the toggleElement (if focusable) every time someone clicks.

[alejandroiglesias]

I confirm this issue happening on 2.3.1 and not on 2.3.0. Also as @adybionka mentioned, removing the href attribute from the a tags stops the issue from happening on 2.3.1.

[StefanAndjelic]

Removing the href attribute only works because then the element cannot be focused. The issue still persists with buttons.

[romanzoller]

This seems to be a duplicate of #6357

[adybionka]

Another workaround of this problem is just not use uib-dropdown-toggle to open dropdown menu. focusToggleElement method is only invoked when is a element with uib-dropdown-toggle directive, which is optional. Instead of this, to open dropdown menu just use is-open attribute:

    <div uib-dropdown is-open="isOpenedDropdownMenu">
        <button ng-click="toggleDropdown($event)">Open dropdown</button>
            
        <ul uib-dropdown-menu>
            <li>...</li>
        </ul>
    </div>

And in controller:

   $scope.toggleDropdown = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.isOpenedDropdownMenu = !$scope.isOpenedDropdownMenu;
    };

[adgoncal]

It looks like the root of the problem was identified by @vukers:
c824731#commitcomment-20174042

[vukers]

@mattlewis92 has a pull request with the fix: #6363