Unplanned
Last Updated: 03 Apr 2025 10:11 by Paul
Paul
Created on: 03 Apr 2025 10:11
Category: Editor
Type: Bug Report
0
HTML select element does not work as a custom tool in the Editor

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

2) When using version 2024.4.1112, if you remove the "ref-toolbar-tool" attribute from the <div class='k-toolbar-item'> 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:

<script>
    $(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;
    }
</script>

### Environment

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

0 comments