Unplanned
Last Updated: 15 Apr 2021 12:45 by ADMIN
FABIO
Created on: 08 Apr 2021 12:42
Category: Kendo UI for jQuery
Type: Bug Report
0
SELECT won't open if a kendo context menu is applied to it (on mobile browsers)

When a kendoContextMenu is applied to a combobox (html tag select) you are not able to show the select options by tapping it. The behaviour is on mobile browser only (tested iPad and Google Chrome developer tools with device toolbar enabled).

I reproduced the issue in telerik dojo, here is the code.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/menu/context-menu">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="example">
      <select>
        <option>Opzione 1</option>
        <option>Opzione 2</option>
        <option>Opzione 3</option>
      </select>
      
    <ul id="menu">
        <li>
            <img src="../content/web/toolbar/reply.png" /> Reply
        </li>
    </ul>
      
</div>
<script>
    $(document).ready(function() {
        setTimeout(function () {
            var initMenu = function () {
                menu = $("#menu").kendoContextMenu({
                    target: "select",
                    select: function(e) {
                        // Do something on select
                    }
                });
            };

            initMenu();
        }, 0);
    });
</script>

</body>
</html>
1 comment
ADMIN
Misho
Posted on: 15 Apr 2021 12:45

Hello,

I was able to replicate the undesired behavior with Chrome on Android and logged it our public Github repo where you could track its status:

https://github.com/telerik/kendo-ui-core/issues/6379 

This issue is also visible in our Public Feedback portal where you could vote for raising its priority:

https://feedback.telerik.com/kendo-jquery-ui/1514566-select-won-t-open-if-a-kendo-context-menu-is-applied-to-it-on-mobile-browsers 

You to consider attaching the menu to another element different than the select, for example using nav bar: 

https://dojo.telerik.com/iDaPEFIy/2

I hope this helps.

Best Regards,
Misho
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.