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:

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:

• javascript
• angularjs
• twitter-bootstrap
• angular-ui-bootstrap
• textangular

• 1 can you write plunker? – Shohel Commented Jul 16, 2015 at 2:25
• 1 I believe the anchor element has trouble accepting focus without href attribute. – Rob J Commented Jul 16, 2015 at 23:39
• 1 Your dropdown now becomes the focus. It is not part of the element in FF, chrome treats dropdown as part of element. I found the difference by evaluating it's conditions. This is not an easy change. – Dave Alperovich Commented Jul 19, 2015 at 21:49
• 1 @VSO, just saw this. Nothing you can Google. I expanded textAngular.min.js. On line 1481 is a watch condition on the element: g.$watch("focussed", function() {. I added console.log(g.focussed); inside the function. It now logs whether the textAngular is in focus or not true/false. If you play around with it, you will notice on FF, clicking the dropdown logs false for focus and in Chrome it logs true. Here is my Plunker. Hope it helps. plnkr.co/edit/6KOOr4f64OZoyXbXNelg?p=preview – Dave Alperovich Commented Jul 20, 2015 at 4:19
• 1 @DaveAlperovich: It does help, thanks again! – VSO Commented Jul 20, 2015 at 12:36

4 Answers 4

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.

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

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

It might be a long shot, but did you reset your CSS defaults? On my project, the browser specific CSS defaults caused variations in the margins, padding, etc. from browser to browser and moved elements around in unpredictable ways.