TagField drop down list is not closing if user clicks outside the field

[trivedir]

I am expecting the tagfield drop down list to close if user clicks outside the field or on some other ext js component. Like in example: http://examples.sencha.com/extjs/6.0...crisp#form-tag

Instead when I use tagfields in a form the drop down remain opens even if I click on some other field in the form or somewhere else. Sample code below:

Ext.create('Ext.form.Panel', {
    title: 'Tag Field Example',
    width: 1000,
    bodyPadding: 10,


    items: [{
        xtype: 'fieldcontainer',
        labelWidth: 100,
        layout: 'hbox',
        items: [{
            xtype: 'fieldcontainer',
            defaults: {
                flex: 1,
            },
            layout: 'hbox',
            items: [{
                xtype: 'tagfield',
                allowBlank: true,
                margin: '5 5 5 5',
                fieldLabel: 'Tag Field 1',
                name: 'tagField1',
                store: ['A', 'B', 'C'],
                queryMode: 'local',
                filterPickList: true,
                emptyText: 'Multi Select...'
            }, {
                xtype: 'tagfield',
                allowBlank: true,
                margin: '5 5 5 5',
                fieldLabel: 'Tag Field 2',
                name: 'tagField2',
                store: ['A', 'B', 'C'],
                queryMode: 'local',
                filterPickList: true,
                emptyText: 'Multi Select...'
            }, {
                allowBlank: true,
                xtype: 'tagfield',
                margin: '5 5 5 5',
                fieldLabel: 'Tag Field 3',
                queryMode: 'local',
                store: ['A', 'B', 'C'],
                filterPickList: true,
                emptyText: 'Multi Select...',
                name: 'tagField3'
            }]
        }]
    }],
    renderTo: Ext.getBody()
});

https://fiddle.sencha.com/#fiddle/13m3

I am using Ext JS 6.0.1.250

[Gary Schlosberg]

Thanks for the report! I have opened a bug in our bug tracker.

[sandeepkashyap]

Any update on this issue? It is affecting our customers.

[[email protected]]

Here is the override we are using in V5.1.3. It basically reverts some of the listener code back to the version that was used in V5.1.1. It seems to be working for us. I'm not sure if it will work for V6.

Ext.define('QLP.override.form.field.PickerOverride', {
    override    : 'Ext.form.field.Picker',
    
    /**
     * Expands this field's picker dropdown.
     */
    expand: function() {
        var me = this,
            bodyEl, ariaDom, picker, doc;
    
        if (me.rendered && !me.isExpanded && !me.isDestroyed) {
            bodyEl = me.bodyEl;
            picker = me.getPicker();
            doc = Ext.getDoc();
            picker.setMaxHeight(picker.initialConfig.maxHeight);
            
            if (me.matchFieldWidth) {
                picker.width = me.bodyEl.getWidth();
            }
    
            // Show the picker and set isExpanded flag. alignPicker only works if isExpanded. 
            picker.show();
            me.isExpanded = true;
            me.alignPicker();
            bodyEl.addCls(me.openCls);
    
            me.hideListeners = doc.on({
                mousewheel: me.collapseIf,
                touchstart: me.collapseIf,
                scope: me,
                delegated: false,
                destroyable: true
            });
            
            // Buffer is used to allow any layouts to complete before we align 
            Ext.on('resize', me.alignPicker, me, {buffer: 1});
            me.fireEvent('expand', me);
            me.onExpand();
        }
    },
    
    /**
     * Collapses this field's picker dropdown.
     */
    collapse: function() {
        var me = this;
        
        if (me.isExpanded && !me.isDestroyed && !me.destroying) {
            var openCls = me.openCls,
                picker = me.picker,
                aboveSfx = '-above';
 
            // hide the picker and set isExpanded flag 
            picker.hide();
            me.isExpanded = false;
 
            // remove the openCls 
            me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
            picker.el.removeCls(picker.baseCls + aboveSfx);
 
            // remove event listeners 
            me.hideListeners.destroy();
            
            Ext.un('resize', me.alignPicker, me);
            me.fireEvent('collapse', me);
            me.onCollapse();
        }
    },
    
    /**
     * @private
     * Runs on touchstart of doc to check to see if we should collapse the picker.
     */
    collapseIf: function(e) {
        var me = this;
 
        // If what was mousedowned on is outside of this Field, and is not focusable, then collapse. 
        // If it is focusable, this Field will blur and collapse anyway. 
        if (!me.isDestroyed && !e.within(me.bodyEl, false, true) && !me.owns(e.target)) {
            me.collapse();
        }
    }
});

[albanirneves]

collapseOnSelect: true