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';
}
After some trial and error, and comparing console.log
s 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';