4

ExtJs 6.2.0 does not work on Firefox if the screen is touch enabled. I noticed the problem using the classic version of the framework, I cannot tell if the modern version is also affected.

This is the exact problem: If the screen is touch enabled, it is possible to use the application with gestures, but not with the mouse. The mouse click does not fire the click events.

There is a mention of this problem on Sencha forum, but what is very frustrating is that Sencha fixes the problem for subscribers, but does not release a new GPL version. There is also a code snippet, but it was not quite clear to me how to use it:

// Undo sencha's logic 
// Needed for top nav buttons to not open links in new tabs/windows when clicked in IE11 EXTJS-13775
// Firefox 52 is getting deteceted now as ALWAYS having pointer events
// chromeOS causing issues too
// unit tests failing
if (Ext.isIE || Ext.isEdge || (Ext.firefoxVersion >= 52) || Ext.os.is.ChromeOS || window.inUnitTest) {
    // sorry windows mobile phones...
    var eventMap = Ext.dom.Element.prototype.eventMap;
    eventMap.click = 'click';
    eventMap.dblclick = 'dblclick';
}
Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121

2 Answers2

3

After some trial and error, and comparing console.logs and rifling in the code, I came up with an override that fixes the bug.

/**
 * workaround for bug in ExtJs 6.2.0.
 * Resolved in current yet unreleased version
 */
Ext.define('Mb.override.dom.Element', {
    override: 'Ext.dom.Element'
},
function(){
    var additiveEvents = this.prototype.additiveEvents,
        eventMap = this.prototype.eventMap;
    if(Ext.supports.TouchEvents && Ext.firefoxVersion >= 52 && Ext.os.is.Desktop){
        eventMap['touchstart'] = 'mousedown';
        eventMap['touchmove'] = 'mousemove';
        eventMap['touchend'] = 'mouseup';
        eventMap['touchcancel'] = 'mouseup';
        eventMap['click'] = 'click';
        eventMap['dblclick'] = 'dblclick';
        additiveEvents['mousedown'] = 'mousedown';
        additiveEvents['mousemove'] = 'mousemove';
        additiveEvents['mouseup'] = 'mouseup';
        additiveEvents['touchstart'] = 'touchstart';
        additiveEvents['touchmove'] = 'touchmove';
        additiveEvents['touchend'] = 'touchend';
        additiveEvents['touchcancel'] = 'touchcancel';

        additiveEvents['pointerdown'] = 'mousedown';
        additiveEvents['pointermove'] = 'mousemove';
        additiveEvents['pointerup'] = 'mouseup';
        additiveEvents['pointercancel'] = 'mouseup';
    }
})

I didn't test if every event translation combination is working. The lines needed especially for click event fired by the mouse with a touchscreen are 

eventMap['click'] = 'click';
eventMap['dblclick'] = 'dblclick';
Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
  • It worked for me like a charm. However, spinner for a number field is working for only first click and then it never works until I reload the page. Had you faced this issue? – Kruti Patel Jan 30 '19 at 15:39
  • @KrutiPatel I'm not sure if I ever used the spinner for a number field. Probably it is best you ask a new question. – Lorenz Meyer Jan 30 '19 at 15:49
1

It's a known issue. See our site compatibility note for details: https://www.fxsitecompat.com/en-CA/docs/2016/touch-event-support-has-been-re-enabled-on-windows-desktop/

Kohei Yoshino
  • 131
  • 4