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

[GAndriyS]

seems like #6321 related too (text input focus bug)

[codymullins]

Yeah, we are experiencing the same issue. We were developing on 2.3.0 and our deployment today went out with 2.3.1 causing widespread breakages for our drop downs.

[dougludlow]

e07f9fd appeared to resolve the issue for me.

Looking through the list of issues, these all seem like duplicates:
#6321
#6357
#6372

[sashberd]

Same issue with 2.3.1 and angular 1.5.9. Reversing to 2.3.0 solve issue. Waiting for fix

[mold]

I still have to click input fields twice in order to get the focus to move there, once to close the dropdown and again to shift focus (regardless of whether the input is in a modal or not).

(Angular 1.5.10, UIBS 2.4.0)

[andriy-ml]

The same behavior as @mold described for Angular 1.5.7 and UIBS 2.3.0

Dropdown always grabs focus for itself when toggle happens.

[mcm-ham]

I experiencing the problem reported by @mold as well. Created bug #6410 to track this.

[axtscz]

Also experiencing this bug. Going back to 2.3.0 did not seem to help