ExtJS grid with feature.Grouping and editing plugin.cellediting that has combo or tagfield will not close editor when click on groups

Question

I'm using a Ext.grid.Panel with 'cellediting' plugin and 'grouping' features. My editor is a tagfield. I'm start editing the field and before I close the picklist (boundlist) clicking on groups headers (to fire blur event)

1. the tag input is hidded but it's boundlist did not (if click on current group)
2. the tag input is moved on top (if click on top groups)

Sencha Fiddle live preview: https://fiddle.sencha.com/#view/editor&fiddle/3ll2

• click on above groups.

• Click on group where current row is part of.

Answer 1

My Current fix:

Ext.define("Ext.fix.grid.feature.Grouping", {
    override: 'Ext.grid.feature.Grouping',

    afterViewRender: function(view) {
        // without callParent the problem is not reproduced,
        // but colapse/expand is not working
        this.callParent(arguments);

        if (view.editingPlugin) {
            view.on({
                beforegroupclick: function(grid) {
                    view.editingPlugin.completeEdit();
                }
            })
        }
    }
});

Answer 2

The issue seems to be that when grouping the focus is not lost on the tagfield. Try this workaround: add a listener in your grid:

listeners: {
    groupclick: function (vw, node, group, e, opts) {
                this.focus();
                }
}

This will remove the focus on the tagfield and will force it to collapse.