下拉导致按钮失去焦点

Question

使用Angular和Angular UI-Bootstrap.

我在textAngular中创建了一个下拉菜单.当您单击文本框或其中一个菜单选项以外的其他内容时,它会禁用该菜单.这是期望的行为.

但是,当使用FireFox时,打开一个下拉菜单会使用户离开菜单(即使他们使用菜单中的下拉菜单).如果它有任何帮助,看起来下拉打开后面和文本框的侧面.

在这种情况下,一张图片值1000字.左边是Chrome(想要的行为),右边是Firefox(不是想要的行为).如果嵌入的图像太小,请单击我.

这是代码.这是工具注册的显示部分.对于那些不熟悉textangular的人 - 它只是创建按钮的代码:

    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>',

编辑:

1. 复制问题的Plunker是:针对plnkr的Clicky(问题的焦点是"项目字段"按钮 - 在Chrome中有效,在firefox中不起作用.
2. 繁荣 - 赏金!

PS请不要被代码量吓倒.唯一相关的html位于app.js文件中,位于taRegisterTool'itemFields'下.

taRegisterTool('itemFields', {
            display:

Answer 1

在FireFox中,您的下拉列表成为焦点.它不是FF中父元素的一部分.Chrome会将下拉列表视为元素的一部分.

记录了一个非常旧的FireFox错误,其状态为UNCONFIRMED

标记中的下拉框不会被视为标记父项的子项

看看我的Plunker版本:这里

我扩展了textAngular.min.js.在线1481有一块手表

    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() {

我在函数中放置了一个日志来显示元素的焦点状态

console.log(g.focussed);

在FireFox中,当点击下拉列表时,你会得到

false

在Chrome中,单击下拉列表时

false
true

似乎Chrome有一个补丁正在观察这样的问题,在下拉菜单获得焦点时将父元素设置为焦点.

Answer 2

简单解决方案

您可以执行的操作是从您尝试使用的按钮组中删除已禁用的属性.这似乎是在Firefox中造成这种行为.

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

为自己看看它的实际效果.更新了plnkr:http://plnkr.co/edit/k7zI9G9078cAhShjz2l4？p =preview

Answer 3

工作溶液

我现在完全可以工作了，想到了一个更简单的解决方案。查看与绿色函数配合使用的下拉菜单。我通过打开下拉菜单解决了由点击引起的问题。为了更安全，您可以完全禁用点击功能。

添加样式：

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

添加脚本：

<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>

工作 Plnkr：http://plnkr.co/edit/7itorLFtKaxEgekGZU1B ?p=preview