Выпадающая кнопка приводит к потере фокуса

Использование Angular и Angular UI-Bootstrap.

Я создал раскрывающееся меню в textAngular. Когда вы нажимаете на что-то другое, кроме текстового окна или одного из параметров меню, оно отключает меню. Это желаемое поведение.

ОДНАКО, при использовании FireFox открытие раскрывающегося списка делает его отображаемым, как если бы пользователь покинул меню (даже если они используют раскрывающийся список из меню). Если это поможет, похоже, что раскрывающийся список открывается и в стороне от текстового поля.

В этом случае картина стоит 1000 слов. Левый Chrome (желаемое поведение), справа Firefox (нежелательное поведение). Нажмите меня, если встроенное изображение слишком мало.

enter image description here

Вот код. Это отображаемая часть регистрации инструмента. Для тех, кто незнаком с 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>',

Edit:

  • Plunker, который реплицирует проблему, заканчивается: Clicky for plnkr (Основное внимание уделяется кнопке "Поля предметов" - работает в Chrome не работает в firefox.
  • Бум - щедрость!

P.S. Пожалуйста, не пугайтесь количества кода. Единственный соответствующий html находится в файле app.js в разделе taRegisterTool 'itemFields'.

taRegisterTool('itemFields', {
            display:

Ответы

Ответ 1

Рабочее решение

Я полностью заработал сейчас, подумал о еще более простом решении. Посмотрите раскрывающийся список, работающий с вашей зеленой функцией. Я обойду проблему, вызванную щелчком, открыв раскрывающийся список. Чтобы сделать его более безопасным, вы можете полностью отключить функцию щелчка.

Добавить стиль:

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

Добавить 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>

Рабочий Plnkr: http://plnkr.co/edit/7itorLFtKaxEgekGZU1B?p=preview

Ответ 2

В 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 имеет патч, наблюдающий за такой проблемой, при установке родительского элемента в фокусе, когда фокус снижается.

Ответ 3

Простое решение

Что вы можете сделать, это удалить атрибут, отключенный из группы кнопок, которую вы пытаетесь использовать. Похоже, что это поведение вызывает в Firefox.

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

Посмотрите в действии для себя. Обновлено plnkr: http://plnkr.co/edit/k7zI9G9078cAhShjz2l4?p=preview

Ответ 4

Это может быть длинный снимок, но вы использовали reset ваши настройки по умолчанию для CSS? В моем проекте настройки CSS по умолчанию, определенные браузером, приводили к изменениям полей, дополнений и т.д. Из браузера в браузер и перемещали элементы вокруг непредсказуемым образом.