Results 1 to 7 of 7

Thread: Ext 5.1.1 Clicks on menu items trigger unwanted redirect in Chrome on some devices

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    137

    Default Ext 5.1.1 Clicks on menu items trigger unwanted redirect in Chrome on some devices

    Hi,

    I've just discovered some strange behavior:

    Clicks on menu items in toolbars trigger unwanted URL redirects in Chrome.
    The strange thing is that this only happens on certain machines. I was able to reproduce this on a MS Surface 2 Pro and a regular desktop computer of a co-worker of mine while it isn't happening on most other machines (no matter if desktop pc, notebook etc.).

    All of those machines are running the latest version of Chrome (50.0.2661.102 m at the time of writing) and it doesn't make no difference if the click was triggered by a mouse-click or a touch-event (on the Surface).

    I've written a small test-app which only consists of a viewport which holds 2 very simple views in a card layout. Both views are bound to a fixed route (#main & #sub) and the application handles unknown routes by redirecting to #main.

    I've recorded the misbehavior in a short video:
    VyOIIdwJDn.gif

    As you can see, clicking on a menu item in the sub view erroneously triggers the unmatchedroute of the application with an empty hash which shows the main page.

    Once again: This only happens on some machines and is 100% reproducable on those while it never happens on most of the machines i was able to test my app...

    I guess this happens due to the fact that menu items are internally rendered as a items with href="#".
    I further guess that ExtJS usually stops the click event on those links from bubbling/propagating which doesn't seem to work correctly sometimes.

    Here's the (very simple) code of my test-app:

    App.js:
    Code:
    Ext.application({
        name: 'TestApp',
    
        extend: 'TestApp.Application',
    
        autoCreateViewport: 'TestApp.view.Viewport'
    });
    Applicaton.js:
    Code:
    Ext.define('TestApp.Application', {
        extend: 'Ext.app.Application',
        
        name: 'TestApp',
    
        controllers: [ 'Main', 'Sub' ],
    
        listen: {
            controller: {
                '#': {
                    unmatchedroute: function(hash) {
                        console.warn('Unmatched route:', hash);
                        this.redirectTo('#main');
                    }
                }
            }
        }
    });
    view/Viewport.js:
    Code:
    Ext.define('TestApp.view.Viewport', {
        extend: 'Ext.container.Viewport',
        xtype: 'appviewport',
    
        requires: [ 'TestApp.view.Main', 'TestApp.view.Sub' ],
        
        layout: 'card',
        items: [
            { xtype: 'mainview', itemId: 'main-card' },
            { xtype: 'subview',  itemId: 'sub-card' }
        ]
    });
    view/Main.js:
    Code:
    Ext.define('TestApp.view.Main', {
        extend: 'Ext.container.Container',
        xtype: 'mainview',
    
        html: '<div>Main page</div><a href="#sub">Sub page</a>'
    });
    controller/Main.js:
    Code:
    Ext.define('TestApp.controller.Main', {
        extend: 'Ext.app.Controller',
    
        views: [ 'Main' ],
        refs: { viewport: 'appviewport' },
    
        routes: {
            'main': function() {
                this.getViewport().getLayout().setActiveItem('main-card');
            }
        }
    });
    view/Sub.js:
    Code:
    Ext.define('TestApp.view.Sub', {
        extend: 'Ext.panel.Panel',
        xtype: 'subview',
    
        html: '<div>Sub page</div><a href="#main">Main page</a>',
        tbar: [{
            xtype: 'button',
            menu: {
                items: [{
                    text: 'Menu item',
                    itemId: 'menuItem'
                }]
            }
        }]
    });
    controller/Sub.js:
    Code:
    Ext.define('TestApp.controller.Sub', {
        extend: 'Ext.app.Controller',
        
        views: [ 'Sub' ],
        refs: { viewport: 'appviewport' },
    
        control: {
            'subview #menuItem': {
                click: function() {
                    console.warn('Menu item clicked');
                }
            }
        },
    
        routes: {
            'sub': function() {
                this.getViewport().getLayout().setActiveItem('sub-card');
            }
        }
    });

    I'd really appreciate any input on this since it practically renders toolbar menus completely useless to some of our users...

    Thanks & best regards

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report. I've so far been unable to reproduce this. I added your test to this Fiddle:
    https://fiddle.sencha.com/#fiddle/1adq

    Do you see the issue using that test Fiddle? Are you seeing this only with Windows machines?

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    137

    Default

    Hi Gary,

    yes, I can reproduce the issue as described in the fiddle you provided. So far I've only seen it on Windows Machines which actually doesn't mean that much since I don't test our site that much on other OS right now...

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    137

    Default

    I just gathered some more info by debugging the issue on the Surface:
    • The event which is given to menu/Menu.js.onClick is always properly canceled by e.stopEvent inside menu/Item.js.onClick.
    • At the time, the menu's onClick method is called, the hash has already changed from #sub to #. Therefore stopping the event "further down the road" doesn't prevent the hashchange event from being fired & handled.
    • When clicking the menu item via touchscreen on the Surface, the hashchange is sometimes fired, sometimes not. Using the mouse, always fires it.
    • Error is somehow reproducable on machines on which the problem doesn't appear normally:
      * Activate device mode in chrome dev tools & select IPad as device
      * Clicks on the menu item now sometimes trigger the "erroneous" hashchange like when using the touchscreen on the Surface.
      * Note: This only seems to happen in my "standalone" test app, but not when the test app is embedded in the fiddle...

    Bottom line: It seems that the problem lies pretty "low-level" somewhere in event/publisher/Dom.js but I wasn't able to actually find the culprit by now.

    Hopefully this information is helpful to someone out there

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    137

    Default

    I'd still appreciate all the help I can get with this...

    Thanks

  6. #6

    Join Date
    Dec 2014
    Location
    Waterloo, Ontario
    Posts
    25

    Default

    For what it's worth, a coworker of mine is seeing this exact problem on a laptop running Windows 10 with Google Chrome. I am running Windows 8 on an older laptop with Chrome as well and have never seen this issue.

    Here is another thread I was able to find on the issue: https://www.sencha.com/forum/showthr...-Touch-Screens

    It seems to be resolved in 6.0.2, but I asked the original poster to share a workaround for older framework versions.

    Hopefully that helps,
    Dan

  7. #7

    Join Date
    Dec 2014
    Location
    Waterloo, Ontario
    Posts
    25

    Default

    FYI, we were able to work around this bug on my coworker's laptop by navigating to chrome://flags/ and setting the "Enable Touch Events" from automatic to disabled. It seems his laptop model reports 2 touch points, even though it does not actually have a touch screen.

    Hope that helps.
    Dan

Similar Threads

  1. [FIXED] Menu items in Touch devices
    By lucia_mgv in forum Ext 5: Bugs
    Replies: 1
    Last Post: 26 Jun 2014, 9:12 AM
  2. Menu items in Touch devices
    By lucia_mgv in forum Ext 5: Q&A
    Replies: 0
    Last Post: 25 Jun 2014, 1:49 AM
  3. [FIXED-521] 0.98: Sencha killing certain clicks on iOS devices
    By parseroo in forum Sencha Touch 1.x: Bugs
    Replies: 4
    Last Post: 30 Nov 2010, 5:44 AM
  4. Replies: 3
    Last Post: 10 Mar 2010, 9:11 AM
  5. Replies: 0
    Last Post: 9 Mar 2010, 6:50 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •