search

telerik / kendo-ui-core

An HTML5, jQuery-based widget library for building modern web apps.
http://www.telerik.com/kendo-ui
Other
2.54k stars 1.91k forks source link

Cannot show context menu configured for left click on touch devices #5110

Closed jlchereau closed 7 months ago

jlchereau commented 5 years ago

Bug report

I need a context menu to show when clicking/tapping a button for each item of a listview as documented at https://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu/configuration/showon.

https://dojo.telerik.com/aRIkufEl - dojo for reproduction

This context menu is configured as follows:

$("#menu").kendoContextMenu({
    target: "#listview-context-menu",
    filter: "a.k-button",
    showOn: 'click'
});

It works fine on mouse devices including Chrome 75 on Windows 10.

image

It fails to show when switching to touch device emulation on Chrome 75 on Windows 10.

image

None of the following works either:

Reproduction of the problem

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" />
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/webmail.js"></script>
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
        #listview-context-menu {
            padding: 0;
            margin-bottom: -1px;
            min-height: 300px;
        }
        .product {
            position: relative;
            height: 62px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid rgba(128,128,128,.3);
        }
        .product img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            margin: 10px;
            border: 1px solid #000;
            float: left;
        }
        .product h3 {
            margin: 0;
            padding: 15px 5px 1px 0;
            overflow: hidden;
            line-height: 1em;
            font-size: 1.1em;
            font-weight: bold;
        }
        .product p {
            font-size: .9em;
        }
        .product .date {
            float: right;
            margin: -8px 15px 0 0;
        }
        .k-listview:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        @media screen and (max-width: 620px) {
            .product h3 {
                max-width: 100px;
                white-space: nowrap;
                text-overflow: ellipsis;
                height: 15px;
            }

        }
    </style>
</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <h4>WebMail</h4>
        <div id="scroller">
            <div id="listview-context-menu"></div>
        </div>
    </div>
    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="https://demos.telerik.com/kendo-ui/content/shared/images/employees/#= FromID #.png" alt="#: From #" />
            <h3>#:Title#</h3>
            <p class="date">#:Date#<a class="k-button" style="margin-left: 0.5rem;" href="\\#"><span class="k-icon k-i-more-vertical"></span></a></p>
            <p>#:From#</p>
        </div>
    </script>

    <ul id="menu">
        <li>
            <img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" />Reply
            <ul>
                <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply to Sender</li>
                <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply to All</li>
            </ul>
        </li>
        <li class="k-separator"></li>
        <li>
            <img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/forward.png" />  Forward
        </li>
        <li class="k-separator"></li>
        <li>
            Label
            <ul>
                <li>None</li>
                <li class="k-separator"></li>
                <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/important.png" />Important</li>
                <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/todo.png" />Work</li>
                <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/done.png" />Personal</li>
                <li class="k-separator"></li>
                <li>New Label</li>
            </ul>
        </li>
    </ul>
</div>
<script>
    $(function() {
        var dataSource = new kendo.data.DataSource({
            data: window.mails,
            pageSize: 5
        });

        $("#listview-context-menu").kendoListView({
            dataSource: dataSource,
            template: kendo.template($("#template").html())
        });

        $("#scoller").kendoMobileScroller({
            elastic: false
        });

        $("#menu").kendoContextMenu({
            target: "#listview-context-menu",
            filter: "a.k-button",
            showOn: 'click',
            // showOn: kendo.applyEventMap('down')
        });
    });
</script>

<style>

</style>

</body>
</html>

Current behavior

Context menu does not show on touch devices (Chrome 75 emulation) when configured with left click

Expected/desired behavior

Context menu should show on touch devices when configured with left click (Chrome 75 emulation)

Environment

jlchereau commented 5 years ago

Note that the documentation at https://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu/configuration/showon says: Could be any pointer/mouse/touch event, also several, separated by spaces.

But the _wire function at https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.menu.js#L2597 does:

target.on(options.showOn + NS + that._marker, options.filter, that._showProxy);

if the value of showOn is click touchstart, the value of options.showOn + NS + that._marker is something like click touchstart.kendoMenufeb28602 and only the last event gets a namespace.

aabhishek1 commented 1 year ago

Hi, Is there any fix for this issue

martintabakov commented 7 months ago

The ContextMenu opens in the provided example. The issue probably occurs because the filter of the component is element and you need to click on a specific place. Tested on iPhone in Chrome and Safari;

martintabakov commented 7 months ago

The code snippet provided above was tested in this Dojo example with Kendo v2023.3.1114 on Android and iOS devices. As the menu opens regardless of the device/browser, we are closing the issue until further information is provided to reproduce it.