下拉导致按钮失去焦点

Question

使用 Angular 和 Angular UI-Bootstrap。

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

但是，当使用 FireFox 时，打开下拉菜单会使它看起来好像用户离开了菜单（即使他们正在使用菜单中的下拉菜单）。如果有任何帮助，下拉菜单似乎会在文本框的后面和侧面打开。

在这种情况下，一张图片抵得上 1000 个单词。左边是 Chrome（期望的行为），右边是 Firefox（不是期望的行为）。 Click me in case embedded image is too small.

这是代码。这是工具注册的显示部分。对于那些不熟悉 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>',

编辑：

复制问题的 Plunker 已启动：Clicky for plnkr（问题的焦点是 "Item Fields" 按钮 - 在 Chrome 中有效，在 firefox 中无效。
繁荣 - 赏金！

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

taRegisterTool('itemFields', {
            display:

Answer 1

在 FireFox 中，您的下拉菜单成为焦点。它不是 FF 中父元素的一部分。 Chrome 将下拉列表视为元素的一部分。

有一个非常旧的 FireFox bug 记录，状态为 UNCONFIRMED

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

查看我的 Plunker 版本：Here

我扩展了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

可能希望不大，但是您是否重置了 CSS 默认值？在我的项目中，特定于浏览器的 CSS 默认值会导致浏览器之间的边距、填充等发生变化，并以不可预知的方式移动元素。

Answer 3

简单的解决方案

您可以做的是从您尝试使用的按钮组中删除禁用的属性。这似乎是导致 Firefox 出现这种行为的原因。

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

亲眼看看它的实际效果。更新了 plnkr：http://plnkr.co/edit/k7zI9G9078cAhShjz2l4?p=preview

Answer 4

工作解决方案

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

添加样式：

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

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

下拉导致按钮失去焦点

Dropdown Causes Button To Lose Focus

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap

textangular

简单的解决方案

工作解决方案