Results 1 to 7 of 7

Thread: 6.2.1 classic / ComboBox useless since Chrome 56 on touch

    You found a bug! We've classified it as EXTJS-23966 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default 6.2.1 classic / ComboBox useless since Chrome 56 on touch

    Since Chrome 56 now defaults document level touchstart and touchmove listeners to passive, the ComboBox trigger is now useless and the list almost never opens on touch/tap. Sometimes, the list may flash open quickly but then insta-close.

    On each failed touch/tap, we get the below in dev console

    Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    Obviously this is a UX nightmare as forms with combo boxes are completely broken.

    Kitchen Sink exhibits this behaviour @ http://examples.sencha.com/extjs/6.2...c#simple-combo

    So does my fiddle @ https://fiddle.sencha.com/fiddle/1t3i/preview

    You can repro both above using the Chrome dev tools emulator.

    The attachment below was meant to be a animated gif, but seems we can't post these, or I have no idea how to do it.

    Attachment 56096

  2. #2
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    389

    Default

    This bug has been identified and is currently being addressed. Thank you for bringing this to our attention.

    Kevin Cassidy
    Sencha Support Team

  3. #3
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    Also affects other trigger/picker style widgets eg. Date field. Very nasty. Surprised nobody else has hit this issue - I couldn't find anything similar in the forums here. With this issue, it's now practically impossible to fill out a basic input form which contains a editable combo box on a Chrome touch device, as you would need to know the available items to initiate type-ahead cos the trigger is broke.

    Below is a override which I created to address the problem. It's a very targeted fix and very low level, so use at your own risk. It will probably break if applied to IE < 10 ... fortunately (for me) IE10 is lowest IE we support. It may well break other things, but it seems to do the job OK for us.

    Would appreciate the real fix from Sencha ASAP as this is a far reaching and critical issue.

    PHP Code:
    Ext.define('FigtreeWeb.overrides.event.publisher.Dom', {
        
    override'Ext.event.publisher.Dom',
        
    noPassivefalse,
        
    noPassiveRe: /^touch(start|end|move)$/,
        
    constructor: function() {
            
    this.callParent();
            var 
    hasListenerOptions false;
            
    window.addEventListener('options-test'nullObject.defineProperty({}, 'capture', {
                
    get: function() {
                    
    hasListenerOptions true;
                }
            }));
            
    this.noPassive hasListenerOptions && (Ext.isChrome || Ext.isChromeMobile);
        },
        
    addDelegatedListener: function(eventName) {
            
    this.delegatedListeners[eventName] = 1;
            if (
    this.noPassiveRe.test(eventName) && this.noPassive && this.target instanceof Window) {
                
    console.debug("Force passive:false option for event: " eventName);
                
    this.target.addEventListener(
                    
    eventNamethis.onDelegatedEvent, {
                        
    passivefalse,
                        
    capture: !!this.captureEvents[eventName]
                    }
                );
            } else {
                
    this.target.addEventListener(
                    
    eventNamethis.onDelegatedEvent, !!this.captureEvents[eventName]
                );
            }
        }
    }); 

  4. #4
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    Bump

  5. #5
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    Very disappointed that this is not being taken seriously. It's about as criticial as it gets. ExtJS is currently broken in Chrome 56+ on touch devices due to https://github.com/WICG/interventions/issues/18. Where is the actual fix from Sencha?

  6. #6
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    The silence is deafening.

  7. #7
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    Having still not heard a peep out of Sencha, below is revised fix which relaxes when to force passive to false ie. not just isChrome or isChromeMobile. It now always sets passive false if the browser supports it. I believe this is harmless to other (non Chrome) browsers as Chrome is the only one which forces passive true on those DOM Window touch events (which is against the spec and outlined in their intervention). Specifically this revision enables Chrome emulator to still work when emulating non Chrome items such as an iPad - where isChrome and isChromeMobile are reported as undefined, so the fix never applied.

    PHP Code:
    // Tapping a trigger field trigger icon may flash the picker instead of showing it in touch on Chrome 56+
    // Due to the Chrome intervention re. passive events, see https://github.com/WICG/interventions/issues/18
    // Below will break IE < 10, though you can modify to resolve that
    Ext.define('FigtreeWeb.overrides.event.publisher.Dom', {
        
    override'Ext.event.publisher.Dom',
        
    noPassivefalse,
        
    noPassiveRe: /^touch(start|end|move)$/,
        
    constructor: function() {
            
    this.callParent();
            var 
    hasListenerOptions false;
            
    window.addEventListener('options-test'nullObject.defineProperty({}, 'capture', {
                
    get: function() {
                    
    hasListenerOptions true;
                }
            }));
            
    this.noPassive hasListenerOptions;
        },
        
    addDelegatedListener: function(eventName) {
            
    this.delegatedListeners[eventName] = 1;
            if (
    this.target instanceof Window && this.noPassiveRe.test(eventName) && this.noPassive) {
                
    console.debug("Force passive:false option for event: " eventName);
                
    this.target.addEventListener(
                    
    eventNamethis.onDelegatedEvent, {
                        
    passivefalse,
                        
    capture: !!this.captureEvents[eventName]
                    }
                );
            } else {
                
    this.target.addEventListener(
                    
    eventNamethis.onDelegatedEvent, !!this.captureEvents[eventName]
                );
            }
        }
    }); 

Similar Threads

  1. [FIXED] [6.2.1][classic] problem in touch with textfield with emptytext
    By Mahmoud690 in forum Ext JS 6.x Bugs
    Replies: 2
    Last Post: 15 Feb 2017, 3:10 AM
  2. Touch scroller with classic toolkit
    By f.baron in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 26 Jul 2016, 8:19 AM
  3. Touch scrolling, Classic toolkit
    By johan1983 in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 12 Jul 2016, 2:41 AM
  4. [OPEN] Classic theme Fieldset rendering issue in Chrome
    By brianehenry in forum Ext JS 6.x Bugs
    Replies: 2
    Last Post: 8 Jul 2016, 5:22 AM
  5. [OPEN] Sencha Touch 2.3 microloader will not load ios-classic on iOS 6
    By drb in forum Sencha Touch 2.x: Bugs
    Replies: 5
    Last Post: 19 Apr 2014, 1:09 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
  •