7.2 TagField Bug

[tomdchi]

Ext JS v 7.2.0.67, Classic toolkit

On a Tag Field when clicking on the field label the following error is thrown:

Uncaught TypeError: Cannot read property 'pointerType' of undefined

This is coming from line 208986 in ext.all-rtl-debug.js, onTriggerClick method. I found that the e parameter is undefined.

[asolodovnicov]

I've just created a ticket for this in support portal. Let's see how long would it take to fix it.

[sys0pp]

I've just created a ticket for this in support portal. Let's see how long would it take to fix it.

I have the same issue, needs better QC

[nbabinski]

Ext.versions.extjs -> 7.2.0.67

Error stack trace:

ext-all-rtl-debug.js?_dc=1594801508803:208986 Uncaught TypeError: Cannot read property 'pointerType' of undefined
    at constructor.onTriggerClick (ext-all-rtl-debug.js?_dc=1594801508803:208986)
    at constructor.onItemListClick (ext-all-rtl-debug.js?_dc=1594801508803:218254)
    at constructor.fire (ext-all-rtl-debug.js?_dc=1594801508803:22904)
    at constructor.fire (ext-all-rtl-debug.js?_dc=1594801508803:37978)
    at constructor.publish (ext-all-rtl-debug.js?_dc=1594801508803:37938)
    at constructor.publishDelegatedDomEvent (ext-all-rtl-debug.js?_dc=1594801508803:37960)
    at constructor.doDelegatedEvent (ext-all-rtl-debug.js?_dc=1594801508803:38004)
    at constructor.onDelegatedEvent (ext-all-rtl-debug.js?_dc=1594801508803:37991)

The error path:

Staring point
Ext.form.field.Tag#onItemListClick

The error is happened when tag filed is expanded and a user clicks tag field (details Ext.form.field.Tag#triggerOnClick defaults to true).

/**
 * Delegation control for selecting and removing labeled items or triggering
 * list collapse/expansion
 * @protected
 */
onItemListClick: function(e) {
    var me = this,
        selectionModel = me.selectionModel,
        itemEl = e.getTarget(me.tagItemSelector),
        closeEl = itemEl ? e.getTarget(me.tagItemCloseSelector) : false;

    if (me.readOnly || me.disabled) {
        return;
    }

    e.stopPropagation();

    if (itemEl) {
        if (closeEl) {
            me.removeByListItemNode(itemEl);

            if (me.valueStore.getCount() > 0) {
                me.fireEvent('select', me, me.valueStore.getRange());
            }
        }
        else {
            me.toggleSelectionByListItemNode(itemEl, e.shiftKey);
        }

        // If not using touch interactions, focus the input
     if (!Ext.supports.TouchEvents) {
            me.inputEl.focus();
        }
    }
    else {
        if (selectionModel.getCount() > 0) {
            selectionModel.deselectAll();
        }

        me.inputEl.focus();

        if (me.triggerOnClick) {   // the issue starts from here
            me.onTriggerClick();   // (1 step) call of onTriggerClick without parameters
        }
    }
}

goes to: Ext.form.field.ComboBox onTriggerClick

    onTriggerClick: function(comboBox, trigger, e) {
        var me = this,
            oldAutoSelect;


        if (!me.readOnly && !me.disabled) {
            if (me.isExpanded) {                       // field is expanded 
                me.collapse();


                // Hide keyboard for touch devices when the picker list is collapsed
                if (e.pointerType !== 'mouse') {  // (2 step) here "e" is not defined 
                    trigger.getEl().focus();
                }
            }
            else {
                // Alt-Down arrow opens the picker but does not select items:
                // http://www.w3.org/TR/wai-aria-practices/#combobox
                if (e && e.type === 'keydown' && e.altKey) {
                    oldAutoSelect = me.autoSelect;
                    me.autoSelect = false;
                    me.expand();
                    me.autoSelect = oldAutoSelect;
                }
                else {
                    if (me.triggerAction === 'all') {
                        me.doQuery(me.allQuery, true);
                    }
                    else if (me.triggerAction === 'last') {
                        me.doQuery(me.lastQuery, true);
                    }
                    else {
                        me.doQuery(me.getRawValue(), false, true);
                    }
                }
            }
        }
    }

Issue workarounds:

1. Set triggerOnClick configuration option of Ext.form.field.Tag to false

2. Override onTriggerClick method of Ext.form.field.ComboBox,
changing (2 step) line from:

if (e.pointerType !== 'mouse') {

to:

if (e && e.pointerType !== 'mouse') {

[mlmcconnell]

@nbabinski - Brilliant. Works perfectly. Thank you!

[tomdchi]

Even with a very concise explanation of the problem and how to fix, anyone want to take bets on how long it takes Sencha to implement said fix? I am going to go with 1 year.