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

Working solution

I fully got it working now, thought of an even simpler solution. Check out the dropdown working with your green function. I go around the problem caused by the click by opening the dropdown. To make it safer you can disable the click function completely.

Add style:

<style>
    .dropdown-menu{
        margin-top: 0px;
    }
</style>

Add script:

<script>
    $('body').on('mouseenter', '.ta-toolbar.btn-toolbar .btn-group', function(){
        $(this).addClass('open');
        $(this).children('button').css('pointer-events', 'none');
    });

    $('body').on('mouseleave', '.ta-toolbar.btn-toolbar .btn-group', function(){
        $(this).removeClass('open');
    });
</script>

Working Plnkr: http://plnkr.co/edit/7itorLFtKaxEgekGZU1B?p=preview