Ext.menu.Item changes the hash to # when clicking on Windows 10 Touch Screens

[brusch]

Was anyone able to fix that problem with an override? Thanks!

[brusch]

Even a diff of what has changed with EXTJS-17945 would help a lot - then I can write the override on my own.
Thanks again!

[FredrikM]

Was anyone able to fix that problem with an override? Thanks!

Its seems like the event isn't really stopped with the e.stopEvent(); in the Ext.menu.Item. Trying with chrome and using the chrome://flags Touch Events API set to enabled, it gives me the same result as one of my mates that has an hybrid device (an laptop with touch screen), on click on the menu item it jumps to the #-tag specified in the anchor for the menu items.

And im running modern 6.5.1 ..

[brusch]

The following override did the trick for me.

Ext.define(null, {
    override: 'Ext.menu.Menu',

onBoxReady: function () {
        var me = this,
iconSeparatorCls = me._iconSeparatorCls,
keyNav = me.focusableKeyNav;

// Keyboard handling can be disabled, e.g. by the DatePicker menu
        // or the Date filter menu constructed by the Grid
if (keyNav) {
            keyNav.map.processEventScope = me;
keyNav.map.processEvent = function (e) {
                // ESC may be from input fields, and FocusableContainers ignore keys from
                // input fields. We do not want to ignore ESC. ESC hide menus.
if (e.keyCode === e.ESC) {
                    e.target = this.el.dom;
}

                return e;
};

// Handle ESC key
keyNav.map.addBinding([{
                key: Ext.event.Event.ESC,
handler: me.onEscapeKey,
scope: me
            },
// Handle character shortcuts
{
                    key: /[\w]/,
handler: me.onShortcutKey,
scope: me,
shift: false,
ctrl: false,
alt: false
}
            ]);
} else {
            // Even when FocusableContainer key event processing is disabled,
            // we still need to handle the Escape key!
me.escapeKeyNav = new Ext.util.KeyNav(me.el, {
                eventName: 'keydown',
scope: me,
esc: me.onEscapeKey
});
}

        me.callSuper(arguments);

// TODO: Move this to a subTemplate When we support them in the future
if (me.showSeparator) {
            me.iconSepEl = me.body.insertFirst({
                role: 'presentation',
cls: iconSeparatorCls + ' ' + iconSeparatorCls + '-' + me.ui,
html: ' '
});
}

        // Modern IE browsers have click events translated to PointerEvents, and b/c of this the
        // event isn't being canceled like it needs to be. So, we need to add an extra listener.
        // For devices that have touch support, the default click event may be a gesture that
        // runs asynchronously, so by the time we try and prevent it, it's already happened

        // we use Ext.supports.TouchEvents here, because we're overriding Ext.supports.Touch in edit/startup.js (Editmode)
if (Ext.supports.TouchEvents || Ext.supports.MSPointerEvents || Ext.supports.PointerEvents) {
            me.el.on({
                scope: me,
click: me.preventClick,
translate: false
});
}

        me.mouseMonitor = me.el.monitorMouseLeave(100, me.onMouseLeave, me);
}
});