Skip to content

HTML select element does not work as a custom tool in the Editor #8194

@kendo-bot

Description

@kendo-bot

Bug report

When adding a <select> element as a custom tool in the Editor, the dropdown does not open.

Reproduction of the problem

  1. Run the Dojo sample and try to open the dropdown in the toolbar:

https://dojo.telerik.com/VVPUopDw

The same example work as expected with version 2023.1.117.

  1. When using version 2024.4.1112, if you remove the "ref-toolbar-tool" attribute from the
    element, the dropdown opens as expected.

Expected/desired behavior

The <select> element must function correctly when added as a custom tool in the toolbar.

Workaround

Handle the "click" event of the select and prevent the event bubbling:

    $(function () {
        const selectElements = $('select[id^="symbolSelect_"]');
        $(selectElements).each(function (index) {
            this.addEventListener("click", clickHandlerSymbolSelect);
        });
    });

    function clickHandlerSymbolSelect(e) {
        e.stopPropagation(); //Prevent event bubbling, so Kendo cannot swallow or cancel the event.
        const sendingElement = e.target;
        sendingElement.showPicker();
        return true;
    }

Environment

  • **Kendo UI version: 2025.1.227
  • **jQuery version: 3.7.1
  • **Browser: [all]

Metadata

Metadata

Labels

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions