SplitButton на панели инструментов не запускает обработчик кликов при перемещении на кнопку переполнения при изменении размера экрана

Question

Недавно мы заметили, что при перемещении кнопки разделения под кнопкой переполнения при изменении размера экрана обработчик щелчка для кнопки разделения не срабатывает. Он отлично работает, когда его нет в кнопке переполнения.

Я столкнулся с этой проблемой Github , которая, кажется, все еще открыта.

$(document).ready(function() {
  $("#toolbar").kendoToolBar({
    items: [{
      type: "button",
      text: "Button"
    }, {
      type: "button",
      text: "Toggle Button",
      togglable: true
    }, {
      type: "splitButton",
      text: "Insert",
      click: splitButtonClickHandler,
      menuButtons: [{
        text: "Insert above",
        icon: "insert-up"
      }, {
        text: "Insert between",
        icon: "insert-middle"
      }, {
        text: "Insert below",
        icon: "insert-down"
      }]
    }, {
      type: "separator"
    }, {
      template: "<label for='dropdown'>Format:</label>"
    }, {
      template: "<input id='dropdown' style='width: 150px;' />",
      overflow: "never"
    }, {
      type: "separator"
    }, {
      type: "buttonGroup",
      buttons: [{
        icon: "align-left",
        text: "Left",
        togglable: true,
        group: "text-align"
      }, {
        icon: "align-center",
        text: "Center",
        togglable: true,
        group: "text-align"
      }, {
        icon: "align-right",
        text: "Right",
        togglable: true,
        group: "text-align"
      }]
    }, {
      type: "buttonGroup",
      buttons: [{
        icon: "bold",
        text: "Bold",
        togglable: true
      }, {
        icon: "italic",
        text: "Italic",
        togglable: true
      }, {
        icon: "underline",
        text: "Underline",
        togglable: true
      }]
    }, {
      type: "button",
      text: "Action",
      overflow: "always"
    }, {
      type: "button",
      text: "Another Action",
      overflow: "always"
    }, {
      type: "button",
      text: "Something else here",
      overflow: "always"
    }]
  });

  $("#dropdown").kendoDropDownList({
    optionLabel: "Paragraph",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [{
        text: "Heading 1",
        value: 1
      },      {
        text: "Heading 2",
        value: 2
      },      {
        text: "Heading 3",
        value: 3
      },      {
        text: "Title",
        value: 4
      },      {
        text: "Subtitle",
        value: 5
      }    ]
  });
});

function splitButtonClickHandler(e) {
  alert('triggered')
  console.log(e, 'triggered')
}

html {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

<base href="https://demos.telerik.com/kendo-ui/toolbar/index">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<div id="example">
  <div class="demo-section k-content wide">
    <div id="toolbar"></div>
  </div>

Додзё, воспроизводящий проблему: https://dojo.telerik.com/aKAseZAC

Answer 1

За мой комментарий в этой самой проблеме:

Это прекрасно работает, если для элементов splitButton определены свои собственные обработчики кликов.

Я думаю, что более точное описание будет:

• если не переполнено, потомки без собственного обработчика должным образом наследуют обработчик щелчка от родителя
• при переполнении такие потомки не наследуют обработчик.

Что дает нам прямой обходной путь: повторно объявите обработчик для каждого дочернего элемента:

{
    type: "splitButton",
    text: "Insert",
    click: splitButtonClickHandler,
    menuButtons: [
        { text: "Insert above", icon: "insert-up", click: splitButtonClickHandler },
        { text: "Insert between", icon: "insert-middle", click: splitButtonClickHandler },
        { text: "Insert below", icon: "insert-down", click: splitButtonClickHandler }
    ]
}

Не стесняйтесь также поднять вопрос или прокомментировать проблему на GitHub, чтобы Telerik расставил приоритеты выше.