Dropdown Causes Button To Lose Focus

Question

Using Angular and Angular UI-Bootstrap.

I have created a drop-down menu in textAngular. When you click on something other than the text-box or one of the menu options, it disables the menu. This is desired behavior.

HOWEVER, when using FireFox, opening a drop-down makes it appear as if the user left the menu (even though they are using drop-down from the menu). If it's any help, it looks like the drop-down opens BEHIND and to the side of the text-box.

A picture is worth a 1000 words in this case. Left is Chrome (desired behavior), right is Firefox (not desired behavior). Click me in case embedded image is too small.

Here is the code. This is the display part of the tool registration. For those unfamiliar with textangular - it's just the code that creates the button:

    display: '<span class="btn-group" dropdown dropdown-append-to-body style="padding: 0px 0px 0px 0px">' +
    '<button class="btn btn-default dropdown-toggle" dropdown-toggle type="button" ng-disabled="showHtml()">' +
    '   <span>Items Fields</span>' +
    '</button>' +
    '<ul class="dropdown-menu">' +
    '   <li ng-repeat="o in options">' +
    '       <a ng-click="action(o)">{{o.name}}</a>' +
    '   </li>' +
    '</ul>' +
    '</span>',

Edit:

1. Plunker that replicates the issue is up: Clicky for plnkr (The focus of the issue is the "Item Fields" button - works in Chrome, doesn't work in firefox.
2. Boom - bounty!

P.S. Please don't get intimidated by the amount of code. The only relevant html is in the app.js file, under taRegisterTool 'itemFields'.

taRegisterTool('itemFields', {
            display:

Answer 1

In FireFox, your dropdown becomes the focus. It is not part of the parent element in FF. Chrome treats the dropdown as part of element.

There is a very old FireFox bug logged with status UNCONFIRMED

the drop-down box in a tag isn't treated as a child of the tag's parents

---

Check out my version of your Plunker: Here

I have expanded textAngular.min.js. On line 1481 there is a watch

    angular.extend(g, angular.copy(c)), i.taToolbar && (g.toolbar =
     g.$parent.$eval(i.taToolbar)), i.taToolbarClass && (g.classes.toolbar =
     i.taToolbarClass), i.taToolbarGroupClass && (g.classes.toolbarGroup = 
     i.taToolbarGroupClass), i.taToolbarButtonClass && 
     (g.classes.toolbarButton = i.taToolbarButtonClass), 
     i.taToolbarActiveButtonClass && (g.classes.toolbarButtonActive = 
     i.taToolbarActiveButtonClass), i.taFocussedClass && (g.classes.focussed =
      i.taFocussedClass), g.disabled = !0, g.focussed = !1, g._$element = h, h[0].innerHTML = "", h.addClass("ta-toolbar " + g.classes.toolbar), 
     g.$watch("focussed", function() {

I placed a log in the function to show the focus status of the element

console.log(g.focussed);

In FireFox, when the drop-down is clicked, you get

false

In Chrome, when the drop-down is clicked

false
true

Seems as though Chrome has a patch watching for just such a problem, setting the parent element to focus when a drop-down gains focus.

Answer 2

Simple solution

What you can do is remove the attribute disabled from the button group your trying to use. That seems to be causing this behavior in Firefox.

$('body').on('click', '.ta-toolbar.btn-toolbar .btn-group', function(){
    $(this).removeAttr('disabled');
});

See it in action for yourself. Updated plnkr: http://plnkr.co/edit/k7zI9G9078cAhShjz2l4?p=preview